Twitter bootstrap 列顺序操作引导

我想使用引导在移动视图中对列重新排序。
当前桌面上的列类似于

[a- long block][b][c]
[d][e][f - long block]

这个的HTML是

<div class="row">
  <div class="col-sm-9 col-xs-12"></div>
  <div class="col-sm-3 col-xs-6"></div>
  <div class="col-sm-3 col-xs-6"></div>
</div>
<div class="row">
  <div class="col-sm-3 col-xs-6"></div>
  <div class="col-sm-3 col-xs-6"></div>
  <div class="col-sm-9 col-xs-12"></div>
</div>

---

我尝试使用

col-sm-push-12

到

f

列，但没有成功。有什么建议吗？

push-*

和

pull-*

将不适用于宽度为100%的列，即

列-*-12

您可以将此解决方案用于

xs

设备

同时检查12柱网格系统。您当前的

sm

网格总数为

15（9+3+3）

，它不会呈现您所期望的桌面列

@介质（最大宽度：768px）{
.第二排{
显示器：flex；
弯曲方向：立柱；/*垂直堆叠*/
}
.row.second>div:最后一个孩子{
顺序：-1；/*默认值为0，因此与顶部对齐*/
}
}

A.
B
C
D
E
F

在使用引导时，如果您始终记得首先考虑移动设备，这会有所帮助。试试这个：

<div class="row">
  <div class="col-xs-12 col-sm-6">a</div>
  <div class="col-xs-12 col-sm-3">b</div>
  <div class="col-xs-12 col-sm-3">c</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">f</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-6">d</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-6">e</div>
</div>

A.
B
C
F
D
E

---

还有一个工作示例：

无需求助于flexbox，Bootstrap为您提供了所需的一切。它可以在除IE9之外的所有主要浏览器上工作。添加供应商前缀以支持IE9+。良好的标准替代方案。我在想OP是想推送

col-xs-12

<div class="row">
  <div class="col-xs-12 col-sm-6">a</div>
  <div class="col-xs-12 col-sm-3">b</div>
  <div class="col-xs-12 col-sm-3">c</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">f</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-6">d</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-6">e</div>
</div>