使用Twitter Bootstrap响应性地重新排序div？

Question

我正在使用Twitter Bootstrap v3,并希望使用列排序和偏移来响应性地重新排序元素 .

这就是我想要使用我的元素的方式.在-xs或-sm断点处,将包含div的行堆叠成4行:

在-md或-lg断点处,包含div的行堆叠为2行:

这是当前代码 - 我知道如何在包含div上设置类,但不知道如何在A,B和C上设置类:

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

我无法弄清楚如何获得A,B和C与引导3的正确顺序列顺序和抵消.它真的可能吗？

这是我使用JSFiddle:http://jsfiddle.net/3vYgR/

Answer 1

我想你想看看push和pull班级......

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

演示:http://bootply.com/77853