Question

我有两栏专栏：

<div class="col-md-5">
    ...
</div>

<div class="col-md-7">
    ...
</div>

在桌面和平板电脑屏幕上，第一个div显示在第二个div的左侧，正如我们所期望的那样。在较小的屏幕上，第一个div再次出现在第二个div的顶部，正如我们所期望的那样。我想知道的是......是否有可能在较小的屏幕上翻转这两个的顺序，以便第二个div出现在第一个div的顶部？

Answer 1

当然！它内置于Bootstrap版本3中，类似col- [size] -push- [cols]，如Bootstrap's documentation

的列排序部分所示

this fiddle中的演示，使用以下基于Bootstrap示例的代码。

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-9 col-sm-push-3">First on mobile, second on desktop</div>
      <div class="col-sm-3 col-sm-pull-9">Second on mobile, first on desktop</div>
    </div>
</div>

Bootstrap列：为移动设备切换订单？

1 个答案: