引导4序类

Question

我有一个关于引导4.1重新排序的问题。根据文件：

重排 使用. order -类来控制内容的可视顺序。这些类具有响应性，因此可以按断点设置顺序(例如，.order-1 .order-md-2)。包括对所有五个网格层的1到12的支持。

我尝试过只在中小屏幕上设置重新排序，使用文档中显示的.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

您需要在较大的断点中重新排序，因为引导是可移动的第一方法(这意味着它在媒体查询中使用min-width )，所以当只使用sm时，它将应用来自sm和up的属性(包括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>

​

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

​

<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>

​

Answer 2

这是Bootstrap的默认行为，并且是预期的。

用一句话说，所有引导的断点后缀(-sm -md .)从那个断点向上工作。

因此，如果您设置了col-sm-6，这意味着您的列将是sm断点以及md和lg中行大小的一半，除非您覆盖它(例如，col-md-2 )。

这一切都可以追溯到这里 (在媒体查询中使用最小宽度)

Answer 3

下面是一个示例，您如何使用媒体查询来实现这一点：

<div class="row">
   <div class="col-12">
       <!-- some content -->
   </div>
   <div class="col-md-9">
       <!-- some content -->
   </div>
   <div class="col-md-3 move-down">
       <!-- some content -->
   </div>
   <div class="col-md-6 move-up">
       <!-- some content -->
   </div>
   <div class="col-md-6">
       <!-- some content -->
   </div>
</div>

@media (max-width: 767px) {
    .move-down {
        order: 2;
    }
    .move-up {
        order: 1;
    }
}