Question

我有col-lg-5的两个div。当视图端口更改为移动设备时，我想首先将第二个div作为顺序。我在v4.0.0-beta.2中使用Bootstrap order-*类。

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

但是在我使用col的小型设备中，这应该改变如下：

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

但它没有改变，它仍然保持相同的顺序。

Answer 1

我认为最简单的解决方案是在第二个div上使用order-first order-lg-2类。当然，如果您希望更改lg以外的制动点的列顺序，那么您也可以使用其中一个可用的.order{-sm|-md|-lg|-xl}-2类。

当.order-first实际为第二个div设置order: -1时，它保证第二个div在视觉上是第一个div，因此不需要在第一个div上明确设置顺序。（.order-1不会出现这种情况！）
此外，由于Bootstrap具有移动优先思维模式，我们必须添加一个.order{-sm|-md|-lg|-xl}-2类来在更宽的屏幕上设置列的“原始”排序。

<div class="container">
    <div class="row">
        <div class="col-lg-5">
            [first_div]
        </div>

        <div class="col-lg-5 order-first order-lg-2">
            [second_div]
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

注意：肯定你有，但你的实际例子错过了.row - 以及正确格式化.container - 包装器。 .row对于完成这项工作非常重要。

Answer 2

编辑回答。

我明白了。 Bootstrap 4假设您正在为最小的设备屏幕（xs）进行开发，因此order-1旨在用于最小的设备（xs）。 order-sm-1表示将此用于尺寸> gt = = sm的所有设备。因此，您必须从最小设备（移动设备）的订单开始。因此，您需要将第二个div中的内容设置为第一个div中的内容，反之亦然。然后你告诉bootstrap：如果它大于或等于sm大小改变顺序order-sm-12。

总结：使用bootstrap 4，您可以从较小的屏幕尺寸（xs）开始开发，并为大于或等于（sm，md，xl）的设备定义断点。

<div class="row">
  <div class="col-lg-5 col-12 order-sm-12">
    [content_second_div]
  </div>
  <div class="col-lg-5 background-10 col-12  order-sm-1">
    [content_first_div]
 </div>
</div>

请在此处阅读以获取更多信息： https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

同时确保您的<head>包含

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

订单不起作用Bootstrap v4.0.0-beta.2

2 个答案: