Twitter Bootstrap 3 - 在超小型设备上交换列

Question

我在Twitter bootstrap中有两列,它们看起来像这样:

<div class="col-md-4 col-sm-6 col-xs-12">
   <div class="post">
      Something here
   </div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
   <div class="post">
      Something here
   </div>
</div>

它在xs分辨率下完全缩小到全宽,但我想将这两列相互交换,以便代码中的第二列显示第一列,代码中的第一列将是显示第二列.

我尝试使用col-xs-pull-12,col-xs-push-12但它给了我奇怪的结果,列完全离网.如何使用bootstrap的类交换它们？我希望这只发生在xs分辨率上.

Answer 1

您需要使用pull,并push以正确的方式....这是较大的设备:

1. 在Mobile - Mobile First上更改您想要的标记顺序

2. 添加push并pull更改较大设备的订单

   <div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
      <div class="post">
         Something here Now
      </div>
   </div>
   <div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
      <div class="post">
         Something here 
      </div>
   </div>
   

检查这个BottplyDemo