如何在移动设备上响应式地重新排序 Bootstrap 元素？

通过移动重新排序响应式地对 Bootstrap 元素进行排序

在 Bootstrap 中，管理列顺序对于响应式布局至关重要。然而，在移动设备上实现所需的顺序有时会带来挑战。

初始代码：

<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">1</div>
      <div class="row">
        <div class="col-lg-12">3</div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 order-lg-first">2</div>
</div>

问题：

此代码在移动设备上产生以下顺序：1, 3, 2，而不是所需的 1, 2, 3.

解决方案 1：在大屏幕上禁用 Flexbox

Bootstrap 使用 Flexbox，它强制执行相等的列高。要在移动设备上重新排列列，可以在大屏幕（例如桌面）上禁用 Flexbox。

<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>

解决方案 2：具有自动宽度的 Flexbox Wrap Hack

另一个选项涉及使用具有自动列宽的 Flexbox 换行技巧（w-auto）。

其他资源：

• [Bootstrap 响应列高度](https://www.w3resource.com/twitter-bootstrap /responsive-columns-height.php)
• [如何修复意外的列Bootstrap 4 中的顺序？](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

以上是如何在移动设备上响应式地重新排序 Bootstrap 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！