Bootstrap 3：折叠时更改 .col-X 元素的垂直顺序

【问题标题】：Bootstrap 3: Change vertical ordering of .col-X elements when collapsingBootstrap 3：折叠时更改 .col-X 元素的垂直顺序
【发布时间】：2014-01-27 21:19:55
【问题描述】：

我在大屏幕上的布局如下：

AAA BBB
AAA CCC

（所有A，所有B，所有C组成一个div，所以这里有3个元素）

现在，当它崩溃时，我希望它变成

BBB
AAA
AAA
CCC

我尝试在 HTML 中按此顺序指定元素，但后来我能设法为展开视图获得的最佳效果是（使用 .push-X 类）

AAA BBB
AAA
    CCC

我能想到的唯一解决方案是通过 JS 移动东西，或者在正确的位置复制 CCC 并根据视口大小显示和隐藏它们。

有没有更简洁的方法来做到这一点？

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

<div class="row">
   <div class="col-xs-12 col-md-6 col-md-push-6">BBB</div>
   <div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div>
   <div class="col-xs-12 col-md-6 ">AAA</div>
   <div class="col-xs-12 col-md-6 ">CCC</div>
</div>

这会起作用的。

它是怎么做的？... 首先，您需要首先为移动设备安排内容（因此将移动设备视为“自然”顺序，即

BBB
AAA
AAA
CCC

然后，当你扩展到桌面时，你会得到这个：

BBB AAA  <--- wrong order
AAA CCC

因此，您需要通过将BBB 内容向右推，并将AAA 内容向左拉来交换顺序

BBB------>.
.<------AAA

【讨论】：

如果AAAs 是两个 div，那会起作用，但它们不是。它们是一个 div，高度大约是 BBB 和 CCC 的两倍。