Bootstrap 4 中的订单列不起作用答案

【问题标题】：Order columns in Bootstrap 4 doesn't workBootstrap 4 中的订单列不起作用
【发布时间】：2019-07-17 07:13:17
【问题描述】：

<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 中更改移动视图的顺序。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

你只需要这样做...

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

https://www.codeply.com/go/1niA4HHVoV

【讨论】：

【解决方案2】：

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>

【讨论】：

如果您只想更改大屏幕 (lg) 及以上屏幕的顺序（xl 也是如此），只需将 order-sm-* 更改为 order-lg-* 即可进行排序。跨度>
没有前缀的类（order-1 & order-2）是最小屏幕的默认设置（例如，与order-xs-*相同）。