Question

这看起来像一个简单的任务，但无法让它发挥作用。我需要为平板电脑重新订购div，这是100％的宽度。请查看以下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

如果您首先考虑移动设备，那么它是可行的。将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>

Answer 2

如果你不想先移动它，那就是黑客攻击：

@media (max-width: 768px) {
      .row.reorder-xs {
        transform: rotate(180deg);
        direction: rtl; /* Fix the horizontal alignment */
      }

      .row.reorder-xs > [class*="col-"] {
        transform: rotate(-180deg);
        direction: ltr; /* Fix the horizontal alignment */
      }
    }

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

2 个答案: