html - 重新排序/重新排列Twitter Bootstrap列

我需要这样对我的列进行重新排序，但是由于您无法执行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>

最佳答案

所以您无法使用引导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>

关于html - 重新排序/重新排列Twitter Bootstrap列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31191249/