xs bootstrap4 中的订单优先答案

【问题标题】：Order-first in xs bootstrap4xs bootstrap4 中的订单优先
【发布时间】：2019-01-24 10:03:05
【问题描述】：

我已经使用 order-sm-first 如何将它用于旧 xs Extra small

所有查询中的订单优先工作

<div class="col-md-6 col-sm-12 order-sm-first">

【问题讨论】：

xs 在 bootstrap 4 中被删除，也许你可以像这样使用它 -> order-first

标签： html css bootstrap-4

【解决方案1】：

您正在寻找order-first。仅使用实际的 -xs 中缀被删除。 xs 断点 (-xs。

还知道order-first 确实意味着“xs 及以上”上的第一个，因此需要根据需要用更大的断点覆盖它...

<div class="container">
    <div class="row">
        <div class="col-6">
            1 (first on sm and up)
        </div>
        <div class="col-md-6 col-sm-12 order-first order-sm-last">
            2 (first on xs)
        </div>
    </div><!--/row-->
</div><!--container-->

https://codeply.com/go/WMnCWPikCh

【讨论】：

【解决方案2】：

我想您想知道引导程序中的 order-0 实用程序。 Bootstrap4 是移动优先的，因此理想情况下，您应该以应该首先在移动中发生的方式编写 HTML。然后对于其他视图更改您的 HTMl 元素的顺序。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-xl-3 p-2 bd-highlight">First flex item</div>
  <div class="order-xl-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-xl-1 p-2 bd-highlight">Third flex item</div>
</div>

【讨论】：