Twitter bootstrap 3 引导3：在折叠时更改.col-X元素的垂直顺序

在大屏幕上时，我有以下布局：

AAA BBB
AAA CCC

（所有A、B和C构成一个div，因此这里有3个元素）

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

BBB
AAA
AAA
CCC

我试着在HTML中按这个顺序指定元素，但我能为扩展视图获得的最好结果是（使用.push-X类）

我能想到的唯一解决方案是通过JS移动物体，或者在正确的位置放置重复的

CCC

，并根据视口大小显示和隐藏它们

有没有更干净的方法

<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  <--- wrong order
AAA CCC

---

如果

AAA

s是两个div，那就行了，但它们不是。它们是一个div，高度大约是

BBB

和

CCC

的两倍。

BBB
AAA
AAA
CCC

BBB AAA  <--- wrong order
AAA CCC

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