如何在移动端响应式Bootstrap中实现自定义列排序？

移动设备上的响应式 Bootstrap 列排序

在设计响应式布局时，确保不同屏幕尺寸上所需的列顺序可能具有挑战性。此问题解决了在移动设备上与大屏幕上以不同方式排列嵌套列布局的具体情况。

问题：

开发人员有一个包含两列的布局以及右侧列中的嵌套行。目标是在移动设备上按以下顺序显示列：

但是，当前代码会导致移动设备上的 1-3-2 顺序不正确。

解决方案：

解决方案涉及禁用较大屏幕尺寸的 Flexbox 并使用浮动在移动设备上实现所需的布局。以下代码演示了这种方法：

工作原理：

• 在较大屏幕上禁用 Flexbox： d- flex d-lg-block 实用程序类在小于 lg 的屏幕上启用 Flexbox，但在 lg 上禁用它
• 在移动设备上使用浮动：禁用 Flexbox 时，在列上使用 float-left 实用程序将它们并排放置。
• 使用 order-* 重新排序： 在移动设备上（启用 Flexbox 时），order-* 实用程序类用于将列重新排序为

替代解决方案：

正如提供的答案中提到的，另一个潜在的解决方案涉及使用 w-auto 的 Flexbox 包装 hack。这种方法涉及在列上设置自动宽度，允许它们在移动设备上换行到下一行。但是，需要注意的是，此 hack 可能不如第一个解决方案可靠，第一个解决方案依赖于标准 Bootstrap 实用程序。

以上是如何在移动端响应式Bootstrap中实现自定义列排序？的详细内容。更多信息请关注PHP中文网其他相关文章！