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，除非您需要支持旧版本的浏览器。我希望我的回答对你有所帮助！

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

4 个答案: