在 Bootstrap 4 中，在桌面和移动视图之间切换时自定义列的排列可能有点棘手。让我们解决一个特定的场景：您有两列，右列中有一个嵌套行。您的目标是使布局响应，使其显示如下：
桌面版本：
--------- ------ | 2 || 1 | | || | | |------- | || 3 | | || | | |------- | | | | ---------
移动版本（按顺序堆叠）：
-------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | --------
Bootstrap 4 中的默认 Flexbox 布局可确保列的高度相等。要实现所需的桌面布局，您可以为大屏幕禁用 Flexbox 并使用浮动：
<div class="container">
<div class="row d-flex d-lg-block">
<div class="col-lg-8 order-1 float-left">
<div class="card card-body tall">2</div>
</div>
<div class="col-lg-4 order-0 float-left">
<div class="card card-body">1</div>
</div>
<div class="col-lg-4 order-1 float-left">
<div class="card card-body">3</div>
</div>
</div>
</div>或者，您可以采用利用 w 的 Flexbox Wrapping Hack -auto:
<div class="container">
<div class="row">
<div class="col-lg-8 order-1">
<div class="card card-body">2</div>
</div>
<div class="col-lg-4 order-0">
<div class="card card-body w-auto">1</div>
</div>
<div class="col-lg-4 order-1">
<div class="card card-body w-auto">3</div>
</div>
</div>
</div>两种方法有各自的优点和缺点。浮动方法更简单，但可能会导致对齐和响应能力问题。包装黑客提供了更好的响应能力，但需要更复杂的 CSS。
以上是如何针对桌面和移动视图以不同的方式重新排序 Bootstrap 列？的详细内容。更多信息请关注PHP中文网其他相关文章！
