Flex容器必须显式添加d-*类（如d-md-flex）才能启用Flex布局，仅flex-column或flex-row无效；方向类需按断点连续覆盖，避免sm/md等区间断层失效。

Flex容器必须显式加 d-* 类才能在对应断点启用布局

只写 flex-column 或 flex-row 不会生效——这些类只设置 flex-direction，但前提是容器已声明 display: flex。而 d-flex 本身无断点，d-sm-flex、d-md-flex 才是真正控制“何时启用 flex”的开关。

常见错误：

—— 这在 sm/md 屏下仍是普通块级流，flex-column 完全不触发，因为缺了 d-sm-flex 或 d-md-flex。

• 想让容器在 ≥768px（md）启用 Flex 横排：必须写 d-md-flex flex-md-row
• 想从 xs 就启用 Flex，且随断点切换方向：写 d-flex flex-column flex-md-row（xs 竖排，md+ 横排）
• 验证是否生效：打开浏览器开发者工具，看 computed 样式里有没有 display: flex；没有，就是漏了 d-* 类

方向类和换行类要按断点连续覆盖，避免中间断层

Bootstrap 的 flex 工具类（如 flex-row、flex-wrap）全部带断点前缀，不加前缀 = 仅在 xs 生效，其他尺寸回退到默认流式布局。所谓“断层”，是指某个断点区间内既没显式启用 Flex，也没指定方向，结果子项按文档流堆叠，完全失控。

• 错误写法：flex-column flex-lg-row → xs 竖排，lg+ 横排，但 sm/md 仍为 block 流，不是竖排也不是横排
• 正确写法（从小到大）：flex-column flex-sm-row → xs 竖排，sm 起横排
• 正确写法（从大到小）：flex-lg-row flex-md-column → lg+ 横排，md 到 sm 竖排，xs 回退到 block（除非额外加 d-flex）
• flex-wrap 和 flex-nowrap 可叠加，但注意顺序：后写的覆盖前写的，比如 flex-wrap flex-xl-nowrap 表示 xl+ 强制不换行

图文上下/左右切换要用 flex-column-reverse + flex-{breakpoint}-row

移动端图片在上、文字在下，桌面端左右并排——这个经典需求不能靠 order-* 或媒体查询硬写，用 flex-column-reverse 配合断点方向切换最干净。

• HTML 结构保持语义顺序（先文字后图片），然后容器加：d-flex flex-column-reverse flex-md-row
• 原理：flex-column-reverse 让文字渲染在图片上方（源码顺序不变，视觉反转）；flex-md-row 在 md+ 切换为水平排列，同时自动取消 reverse 效果，恢复源码顺序
• 配合宽度控制：col-md-6 给两个子项，确保桌面端等宽并列；小屏下因是 column，自然堆叠
• 别在 .row 上重复加 d-flex：.row 已是 flex 容器，再加可能破坏栅格 margin 行为

按钮组响应式切换必须放弃 .btn-group-vertical

.btn-group-vertical 是静态类，没有断点变体，也无法被 flex-md-row 覆盖。一旦需要响应式方向切换，就得退到更底层的 flex 工具类。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 替代方案：
  —— 小屏垂直，md+ 水平
• 顺序很重要：flex-md-row 必须写在 flex-column 后面，否则会被覆盖
• 按钮宽度统一撑满？加 w-100；想收窄不拉伸？加 flex-grow-0
• 混用 .btn-group 和 .btn-group-vertical 会导致圆角异常或边框合并失效，直接删掉 .btn-group-vertical

实际项目里最容易被忽略的，是把 flex 方向类当“独立开关”用，却忘了它们依赖 d-* 类激活。很多布局在开发者工具里看着 class 都写了，但 computed 样式里没有 display: flex，问题就出在这一步。