时间戳

首页 > 解决方案 > 订购 div 断点移动 Bootstrap 4

bootstrap-4 - 订购 div 断点移动 Bootstrap 4

问题描述

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

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

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

标签： bootstrap-4

解决方案

列的用途order-first和orader-md-0类别。content 2

order-first对行中的第一个列进行排序。While到达断点时order-md-0重置order列的。md

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

推荐阅读