html - Bootstrap 4 排序类

Question

我有一个关于 bootstrap 4.1 重新排序的问题。根据文档:

Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1 .order-md-2). Includes support for 1 through 12 across all five grid tiers.

我尝试使用文档中显示的 .order 类仅在中小型屏幕上设置重新排序，但它也会在较大的断点上重新排序内容，我做错了吗？

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-lg-4 order-sm-2">
        <!-- some contents here -->
        </div>
        <div class="col-sm-12 col-lg-8 order-sm-1">
        <!-- some contents here -->
        </div>
    </div>
</div>

Answer 1

你需要在更大的断点重新排序，因为 Bootstrap 是移动优先的方法，(这意味着它在媒体查询中使用 min-width)，所以当只使用 sm 它将应用 sm 及以上的属性(包括 md 和 lg)。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

关于 BS4 中的 order 还需要了解的一件事是，您可以使用 order-X-first、order-X-last 和 order-X-0，所以这里有一个包含这些类的片段。你可以在这个 answer 中看到它们

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>