如何使用 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

我使用 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 2

Bootstrap 确实有 column ordering classes, but in this case you can simply use the 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 3

因此，使用 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 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 to flexbox. The main idea in my example is that by using order property you can manipulate the order in which blocks are displaying. The main plus of using flexbox is that you won't need to load any library(such as Bootstrap) to achieve the desired result, such as responsiveness. And it also has a good browser support，除非你需要支持旧版本的浏览器。希望我的回答对您有所帮助！

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

How to split a column in a responsive view using Bootstrap?

css

twitter-bootstrap

responsive-design

bootstrap-4

twitter-bootstrap-4