Twitter bootstrap 3 引导中心列下拉列表。左右列合在一起

宽屏幕上是否可能有3列（3、6、3），但当移动或iPad大小时，中间的列会下降，这样你就可以有效地将2个“3”列合并为“6”、“6”，并在它们下面堆叠全宽的“12”列

目前我已经尝试了下面的html，但是这会在移动级别将它们三个堆叠在一起，而不是将中间部分放到自己的新行中

 <div class="container">
     <div class="row">
         <div class="col-sm-6 col-md-3">TESTING LEFT</div>
         <div class="col-sm-12 col-md-6">TESTING MID</div>
         <div class="col-sm-6 col-md-3">TESTING RIGHT</div>

     </div>
 </div>

测试左
测试中
测试权

一种方法是创建两个“中间”div，在屏幕较大时显示一个，但在屏幕较小时隐藏该div。通过添加

隐藏的md

和

隐藏的lg

来隐藏它。还将

隐藏的sm

和

隐藏的xs

添加到第一个

我创建了一个带有样式的演示，这样你可以更容易地看到不同的div

测试左
测试中
测试权
测试中

在您的情况下，可以使用push和pull类来实现这一点：

   <div class="container">
     <div class="row">
         <div class="col-sm-6 col-md-3">LEFT md first in content</div>
         <div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
         <div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
     </div>
 </div>

内容中左md排在第一位
右md第二内容
中央MD最后的内容

演示：

   <div class="container">
     <div class="row">
         <div class="col-sm-6 col-md-3">LEFT md first in content</div>
         <div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
         <div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
     </div>
 </div>