如何使用 Bootstrap 在响应式视图中拆分列？

Question

我正在使用 Bootstrap v4 alpha4

目前我有：

.row
  .col-xs-12.col-md-8
    div A
  .col-xs-12.col-md-4
    div B
    div C

对于 xs 布局，我希望 div 的顺序为：

Div B
Div A
Div C

我不知道该怎么做，也不知道怎么问。我不是前端开发人员，所以我不知道叫什么。

我们可以将 HTML 更改为我们想要的任何内容。它确实不必必须保持现在的样子。

Answer 1

Bootstrap 确实有 column ordering classes，但在这种情况下，您可以简单地使用 responsive float classes..

<div class="row">
    <div class="col-md-4 pull-md-right">
        b
    </div>
    <div class="col-md-8">
        a
    </div>
    <div class="col-md-4">
        c
    </div>
</div>

http://www.codeply.com/go/XL5zJELyLD

Answer 2

因此，使用 bootstrap 中的类和一些通用样式，您可以像我在这支笔中那样实现。

http://codepen.io/TunderScripts/pen/PGadpr

HTML：

<div class="row">
  <div class="col-xs-12 col-md-4 pull-right col1"></div>
  <div class="col-xs-12 col-md-8 pull-left col2"></div>
  <div class="col-xs-12 col-md-4 pull-right col3"></div>
</div>

css：

.col1{
  background: red;
  height: 200px;
}
.col2{
  background: blue;
  height: 600px;
}
.col3{
  background: green;
  height: 200px;
}

您可以通过使用他们的浮动类（拉左，拉右）来更改默认行为。

Answer 3

我使用float 和position css 属性的组合而不是flexbox 来获得预期的结果。假设大宽度为150px，小宽度为100px。

Working Fiddle

.container {
  width: 250px;
  position: relative;
}
.blue {
  width: 150px;
  height: 300px;
  background: blue;
  position: absolute;
}
.pink {
  width: 100px;
  height: 100px;
  background: pink;
  float: right;
}
.green {
  width: 100px;
  height: 100px;
  background: green;
  clear: right;
  float: right;
}
@media (max-width: 450px) {
  .blue {
    position: relative;
  }
  .green,
  .pink {
    float: none;
    width: 150px;
  }
}

<div class="container">

  <div class="pink"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>

Answer 4

正如承诺的那样，一个简单的draft

HTML

<div class="row">
   <div class="col1">DIV A</div>
   <div class="col2">DIV B</div>
   <div class="col3">DIV C</div>
</div>

CSS

    .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 400px;
  margin: 0 auto;
}

.col1 {
  width: 200px;
  height: 400px;
  background-color: #86a0ff;
}

.col2 {
  width: 150px;
  height: 150px;
  background-color: #ff6cde;
}

.col3 {
  margin-top: -200px;
  margin-left: auto;
  width: 150px;
  height: 150px;
  background-color: #35af6d;
}

@media (max-width: 768px) {
  .row {
    justify-content: center;
    flex-direction: column;
  }

  .col1 {
    order: 2;
    width: 200px;
    margin-top: 50px;
  }

  .col2 {
    order: 1;
    width: 200px;
  }

  .col3 {
    order: 3;
    width: 200px;
    margin-top: 50px;
    margin-left: 0;
  }
}

至于解释，这里有一个很棒的guide 到 flexbox。我的示例中的主要思想是，通过使用 order 属性，您可以操纵块显示的顺序。使用 flexbox 的主要优点是您无需加载任何库（例如 Bootstrap）即可获得所需的结果，例如响应性。而且它还有一个不错的浏览器support，除非你需要支持旧版本的浏览器。希望我的回答对你有帮助！