twitter-bootstrap-3 - Bootstrap 3 : Change vertical ordering of . col-X 元素折叠时

Question

在大型显示器上时，我有以下布局:

AAA BBB
AAA CCC

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

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

BBB
AAA
AAA
CCC

我尝试在 HTML 中按此顺序指定元素，但我能设法为扩展 View 获得的最好的结果是(使用 .push-X 类)

AAA BBB
AAA
    CCC

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

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

Answer 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