html - Bootstrap 4 中的顺序列不起作用

Question

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2">1
    </div>
    <div class="col-lg-4 col-md-12 order-1">2
    </div>
  </div>
</div>

我有 2 列，我想在桌面和移动设备上以不同的方式订购。 Order-1 在手机上运行良好。但它也适用于桌面。帮助我在 Bootstrap 4 中仅更改移动 View 的顺序。

Answer 1

Bootstrap 是移动优先。您将需要为更大的显示器添加不同的类。

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-sm-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-sm-2">2
    </div>
  </div>
</div>

网格断点基于最小宽度媒体查询，这意味着它们适用于该断点及其上方的所有断点(例如，.order-sm-* 适用于小型、中型、大型和超大型设备，但不适用于第一个 xs 断点)。

---

请注意，您有类 order-2 和 order-1。这些类与 order-xs-* 相同。
因此，如果您只需要针对大型显示器(lg 和 xl)的特殊规则，只需添加以下类:

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-lg-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-lg-2">2
    </div>
  </div>
</div>