引导程序 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和更高级别的属性(包括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，所以这里有一个包含这些类的片段。你可以在这个答案中看到它们

<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这意味着您的列将是断点和md和lgsm行大小的一半，除非您覆盖它(例如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;
}
}

Answer 4

您是否尝试过执行 order-1，这会为较大屏幕设置默认值

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

来源：Bootstrap 4 中的列排序

Answer 5

我也遇到了一些问题。这是让它为我工作的以下代码：

<div class="container-fluid">
<div class="row">
<div class="col-sm-6 order-sm-2 order-1">
<!-- some contents here -->Content1
</div>
<div class="col-sm-6 order-sm-1 order-2">
<!-- some contents here -->Content2
</div>
</div>
</div>

编辑：从相应的列中删除了.order-md类。