订单不工作Bootstrap v4.0.0-beta.2
我在col-lg-5中有两个div。当视图端口更改为移动设备时，我希望将第二个div设置为order first。我在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>但它不会改变，它仍然保持相同的顺序。
回答 2
Stack Overflow用户
发布于 2017-12-16 08:27:47
我认为最简单的解决方案是使用第二个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"/>
注意:确实有，但是您的实际示例缺少用于正确格式化.container包装器的.row -and。要实现这一点，.row非常重要。
Stack Overflow用户
发布于 2017-12-10 18:17:32
编辑后的答案。
我明白了。Bootstrap 4假设您是为最小的设备屏幕(xs)进行开发的，所以order-1应该用于最小的设备(xs)。>= - sm -1表示对大小为order 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">https://stackoverflow.com/questions/47737632
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号