html - 推特 Bootstrap : column re-ordering for full width divs

Question

这看起来是一个简单的任务，但无法让它发挥作用。我需要为平板电脑重新订购 100% 宽度的 div。请看下面的fiddle明白我的意思。

原始引用:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

http://getbootstrap.com/css/#grid-column-ordering

Answer 1

如果您首先考虑移动设备，它是可行的。按照您希望它们在小视口(viewport)中显示的顺序放置 div，然后为大视口(viewport)重新排序。

<div class="row">
    <div class="col-sm-12 col-md-6 col-md-push-6">
        <div style="background:red">
            Put the one that for small screen on top
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-md-pull-6">
        <div style="background:green">
            Put the one that for small screen on bottom
        </div>
    </div>
</div>