order div breakpoint mobile 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

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

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

由于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