订购 div 断点移动引导程序 4

Question

>我在桌面版本中有以下顺序：

<div class="row">
<div class="col-md-7">
Content 1
</div>
<div class="col-md-5">
Content 2
</div>
</div>

如何让内容 2 在移动设备中首先出现？

Answer 1

对content 2列使用order-first和orader-md-0类。

order-first对行中的列进行排序。而order-md-0在到达md断点时重置列的order。

无法仅对移动设备的列进行排序，因为 bootstrap 删除了*-xs-*类的所有变体。因此，您需要同时使用这两个类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-12 col-md-7">
Content 1
</div>
<div class="col-12 order-first order-md-0 col-md-5">
Content 2
</div>
</div>

https://codepen.io/anon/pen/mKRVWN

您尚未将col-*用于小尺寸屏幕。所以我用了col-12.

Answer 2

如果您不需要特别使用 Bootstrap，那么一个简单的 flex 布局将对此进行排序。

有一个特定的order选项：

https://codepen.io/n8udd/pen/eKgONQ