必须显式添加 d-flex 或带断点的 d-*flex 类（如 d-md-flex）才能启用 Flex 上下文，否则仅写 flex-column flex-md-row 无效；方向类需后置以覆盖前序规则，且子项需配合栅格宽度控制布局。

必须显式加 d-flex 和带断点的 d-*flex 类，否则方向切换无效

只写 flex-column flex-md-row 不会生效——这些类只改 flex-direction，但前提是容器已声明 display: flex。而 Bootstrap 的 d-flex 本身没有响应式变体，d-sm-flex、d-md-flex 才是控制“何时启用 Flex”的开关。

常见翻车写法：

—— 缺 d-flex 或 d-md-flex，computed 样式里根本看不到 display: flex，整个 Flex 上下文都没建立，方向类全白写。

• 想 xs 就启用 Flex 并竖排：写 d-flex flex-column flex-md-row
• 想仅从 md 起启用 Flex 横排：写 d-md-flex flex-md-row
• 验证是否生效：打开开发者工具，检查 computed 样式中是否有 display: flex

方向类顺序决定覆盖逻辑，flex-md-row 必须后置

Bootstrap 的响应式 Flex 类是「覆盖式」生效：flex-column 在所有尺寸生效（默认纵向），flex-md-row 从 768px 起生效，并覆盖掉前面的 flex-column。但前提是它写在后面，否则会被压制。

错误写法：flex-md-row flex-column → flex-column 永远生效，flex-md-row 被忽略。

VPS Bootstrap

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

下载

• 正确顺序：flex-column flex-md-row（xs 竖排，md+ 横排）
• 别写 flex-column flex-lg-row：sm/md 区间没覆盖，退回到 block 流，子项堆叠但不是 Flex 控制的竖排
• 如果要 sm 起横排，就用 flex-column flex-sm-row，别跳断点

子项宽度必须配合栅格类，否则大屏不换行或挤成一行

flex-wrap 和 flex-nowrap 可以控制换行，但它们不决定每行几个子项——那得靠子项自身的宽度基准。只靠 flex-grow-1 或没设宽度的 col，大屏下容易全部拉满一行，小屏才折行，达不到预期效果。

• 小屏堆叠 + 大屏并排：用 d-flex flex-column flex-md-row 配合子项 col-12 col-md-6 col-lg-4
• 避免滥用 flex-fill：它让子项均分剩余空间，但父容器宽度突变（如 sm→md）时，高度可能剧烈跳变
• 图文左右切换场景：用 d-flex flex-column-reverse flex-md-row，DOM 顺序不变，视觉自动反转再恢复

别在 .row 上重复加 d-flex，也别混用 justify-content-between 和 flex-column

.row 本身已是 Flex 容器，再套 d-flex 可能破坏栅格计算；而 justify-content-between 在 flex-column 下主轴变成垂直，会把内容上下撑开，造成意外空白。

• Footer 多栏小屏垂直：用 d-flex flex-sm-column，同时去掉 justify-content-between，改用 align-items-start
• 按钮组小屏垂直、大屏水平：写 btn-group flex-column flex-md-row，不是 btn-group-vertical
• 嵌套结构里，父容器漏了 d-md-flex，子项再怎么加 flex-md-wrap 都是摆设

真正容易被忽略的是：Flex 工具类不是独立开关，它们依赖容器是否真正进入 Flex 上下文。漏掉任何一个 d-*flex，那一段尺寸就退回到普通流式布局——尤其在嵌套结构里，父容器没开 d-flex，子项加再多响应式类也没用。