我正在尝试制作如下所示的布局：
On xs设备，我希望顺序是第一-第二-第三。
我的示例代码是：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
div.short { height: 100px; background-color: rgb(174, 199, 232); }
div.medium { height: 200px; background-color: rgb(255, 187, 120); }
div.tall { height: 400px; background-color: rgb(152, 223, 138); }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 short order-sm-9">
First column (short)
</div>
<div class="col-sm-8 medium order-sm-1">
Second column (medium)
</div>
<div class="col-sm-4 tall">
<p>Third column (tall)</p>
<p>
How to keep this <em>under</em> the first (blue) column
when on <code>sm</code> or larger devices, while
preserving the first-second-thrid order on <code>xs</code>
devices?
</p>
<p>
And why are these narrower columns on the left, rather
than right?
</p>
</div>
</div>
</body>
</html>
发生的情况是第一列和第三列最终颠倒在左侧。
Bootstrap 4 使用 Flexbox，因此列的高度始终相等，并且您将无法在较大的屏幕上获得所需的布局。解决方案是禁用 Flexboxsm及以上。使用浮子，使第三个较高的列浮到右侧。弹性盒order-将在移动设备上运行（xs).
https://codeply.com/go/c31HUTtXra https://codeply.com/go/c31HUTtXra
<div class="container">
<div class="row d-sm-block">
<div class="float-left col-sm-8 medium order-2">
Second column (medium)
</div>
<div class="float-left col-sm-4 short order-1">
First column (short)
</div>
<div class="float-left col-sm-4 tall order-3">
<p>Third column (tall)</p>
..
</div>
</div>
</div>
-
d-sm-block禁用弹性盒sm an up
-
float-left禁用 Flexbox 时浮动列，以便高列向右换行
-
order-*在手机上获取所需订单
Related:
Bootstrap 在移动版本上具有不同的顺序 https://stackoverflow.com/questions/48882342/bootstrap-with-different-order-on-mobile-version/4888575
Bootstrap 4 中列之间的空白垂直空间 https://stackoverflow.com/questions/49173381/empty-vertical-space-between-columns-in-bootstrap-4/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
