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

小编典典

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

css

它看起来像一个简单的任务，但却无法正常工作。我需要重新订购宽度为100％的平板电脑的div。

原始参考：

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

阅读 268

2020-05-16

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

2020-05-16