如何在移动设备和桌面设备上以不同方式重新排序 Bootstrap 列？

Bootstrap 中具有列顺序修改的响应式布局

在使用 Bootstrap 的 Web 开发中，与较大屏幕相比，可能需要在移动设备上以不同的方式对列进行重新排序。此问题探讨了一种场景，其中列顺序需要从桌面版本上的 1-3-2 切换到移动版本上的 1-2-3。

Bootstrap 4 采用 Flexbox 进行布局，这通常会导致列的高度相等。此功能对实现本例中所需的桌面布局提出了挑战。为了避免这种情况，一种方法是在较大的屏幕（例如 LG）上禁用 Flexbox，并利用浮动来实现列的自然对齐。

以下是包含此方法的示例代码：

<div>

工作原理：

• 列维护在同一行，因为顺序是相对于父行的。
• d-flex 和 d-lg-block 在 LG 屏幕及更大屏幕上禁用 Flexbox。
• float-left 将列与禁用 Flexbox 时左侧。
• order-* 在移动设备上启用 Flexbox 时重新排序列

另一个选择是探索涉及 w-auto 的 Flexbox 包装黑客。然而，上面提出的解决方案提供了一种在 Bootstrap 中实现所需列顺序的简单方法。

以上是如何在移动设备和桌面设备上以不同方式重新排序 Bootstrap 列？的详细内容。更多信息请关注PHP中文网其他相关文章！