一尘不染

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>

阅读 246

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