Twitter Bootstrap:全宽div的列重新排序

Question

它看起来像一个简单的任务,但无法使其正常工作.我需要为平板电脑重新订购div,这是100%的宽度.请看下面的小提琴,看看我的意思.

原始参考:

<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

如果你认为移动优先,它是可行的.将div放在希望它们出现在小视口中的顺序中,然后对它们重新排序以获得更大的视口.

<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>