Bootstrap Center Column Down Down。左右列齐聚一堂

Question

是否可以在宽屏幕上放置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>

Answer 1

执行此操作的一种方法是创建两个“Mid”div，在屏幕较大时显示一个，但在屏幕较小时隐藏一个。通过添加hidden-md和hidden-lg来隐藏它。同时将hidden-sm和hidden-xs添加到第一个。

我创建了一个带样式的演示，因此您可以更轻松地看到不同的div。

Bootply Demo

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

Answer 2

在您的情况下，您可以使用推拉式课程来实现这一目标：

   <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>

DEMO：http://jsbin.com/muvov/1/