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”的开关。
常见错误：<div class="flex-column flex-lg-row"> —— 这在 sm/md 屏下仍是普通块级流，<code>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 工具类。
- 替代方案：
<div class="btn-group flex-column flex-md-row"> —— 小屏垂直，md+ 水平<li>顺序很重要：<code>flex-md-row必须写在flex-column后面，否则会被覆盖 - 按钮宽度统一撑满？加
w-100；想收窄不拉伸？加flex-grow-0 - 混用
.btn-group和.btn-group-vertical会导致圆角异常或边框合并失效，直接删掉.btn-group-vertical
实际项目里最容易被忽略的，是把 flex 方向类当“独立开关”用，却忘了它们依赖 d-* 类激活。很多布局在开发者工具里看着 class 都写了，但 computed 样式里没有 display: flex，问题就出在这一步。
