重新排序/重新安排twitter bootstrap列

Question

我需要像这样重新排序我的列，但由于你不能col-sm-pull-12 / col-sm-push-12，我甚至无法接近。用Bootstrap有没有办法做到这一点？如果没有Bootstrap，我怎样才能实现这样的目标呢？

http://jsfiddle.net/5d9y6kfc/1/

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-8 red">
      A
    </div>  
    <div class="col-xs-12 col-sm-3 blue">
      B
    </div>
    <div class="col-xs-12 col-sm-4 green">
      C
    </div>  
    <div class="col-xs-12 col-sm-9 yellow">
      D
    </div>
    <div class="col-xs-12 col-sm-3 magenta">
      E
    </div>  
  </div>
</div>

Answer 1

所以你不能用bootstrap push和pull类做这个的原因是因为push和pull类不允许跳行（如果你推或拉超越设置12个网格系统列，它将离开屏幕）

另一种方法是使用hidden类引导程序。这是一个例子 http://jsfiddle.net/swm53ran/282/

<div class="row">
    <div class="a col-xs-12 col-sm-12 col-md-8 col-lg-8">Content of A</div>    
    <div class="b col-xs-12 col-sm-12 hidden-md hidden-lg">Content of B</div>    
    <div class="c col-xs-12 col-sm-12 hidden-md hidden-lg">Content of C</div>        
    <div class="c col-md-4 col-lg-4 hidden-sm hidden-xs">Content of C</div>
    <div class="b col-md-4 col-lg-4 hidden-sm hidden-xs">Content of B</div>
    <div class="d col-xs-12 col-sm-12 col-md-8 col-lg-8">Content of D</div>
    <div class="e col-xs-12 col-sm-12 col-md-4 col-lg-4">Content of E</div>   
</div>