订购 div 断点移动 Bootstrap 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

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

有一个特定的order 选项：

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

Answer 2

将order-first and orader-md-0 classes 用于content 2 列。

order-first 将列排在行中的第一位。而 order-md-0 在到达md 断点时重置列的order。

无法仅对移动设备的列进行排序，因为引导程序已删除 *-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。