最常见原因是容器未添加d-md-flex类，因flex-md-row仅设置flex-direction: row，需父容器已声明display: flex；d-md-flex才是≥768px启用flex的断点开关，缺失则computed样式无display: flex，响应式链条中断。
为什么 flex-md-row 在中屏没生效
最常见原因是容器没加 d-md-flex —— flex-md-row 只设置 flex-direction: row，但前提是父容器已声明 display: flex。Bootstrap 不会自动帮你开 Flex 上下文，d-flex 本身无断点，d-sm-flex、d-md-flex 才是带断点的“开关”。漏掉它，整个响应式链条就断了。
验证方法：打开浏览器开发者工具，检查该元素的 computed 样式里有没有 display: flex；没有，就是 d-*flex 类缺失。
-
flex-column flex-lg-row→ xs 竖排，lg+ 横排，但 sm/md 区间仍是普通块级流（断层） -
d-flex flex-column d-md-flex flex-md-row→ xs 启用 Flex + 竖排，md+ 再次启用 Flex + 覆盖为横排（连续） - 别在
.row上重复加d-flex：.row已是 Flex 容器，额外加可能干扰栅格计算
怎么让小屏倒序、大屏恢复自然顺序
用 flex-column-reverse + flex-md-row 组合，而不是 order-* 类。前者是容器级方向反转，语义一致、可访问性友好；后者只改视觉顺序，且在嵌套结构中极易失效（比如加在 .col 上，而父容器没开 d-flex）。
关键逻辑：移动端靠 flex-column-reverse 把后写的元素（如图片）顶到前面；桌面端靠 flex-md-row 切换主轴方向，reverse 效果自动取消，回归 HTML 源码顺序。
- HTML 结构按语义写（文字先、图片后），视觉反转由类控制，不破坏源码可读性
-
flex-column-reverse必须写在flex-md-row前面，否则会被覆盖 - 子项宽度必须显式控制：
col-md-6让桌面端等宽并排；小屏下col-*自动转为flex: 1，堆叠自适应
Flex 方向类和换行类能叠加吗
可以，但要注意覆盖优先级：后写的同名属性会覆盖前面的。例如 flex-wrap flex-xl-nowrap 表示默认允许折行，仅在 xl+ 强制不折行；flex-column flex-md-row 表示 xs 竖排，md+ 覆盖为横排。
但仅靠 flex-wrap 不足以控制“几列显示”——它只决定是否折行，不控制每行几个子项。真正起作用的是子项自身的宽度类，比如 col-12 col-md-6 col-lg-4。
- 如果子项只用
flex-grow-1，大屏下可能全挤一行，小屏才折行，达不到预期布局 -
flex-fill要慎用：它会让子项均分剩余空间，但断点切换时父容器宽度突变，高度容易剧烈跳变 - 换行类也需带断点：
flex-wrap flex-md-nowrap才能实现小屏堆叠、大屏强制单行
最容易被忽略的底层依赖
所有 Flex 工具类（flex-row、justify-content-center、align-items-end）都依赖容器是否真正进入 Flex 上下文。漏掉任何一个断点的 d-*flex，那一段尺寸就退回到普通流式布局——尤其在嵌套结构里，父容器没开 d-flex，子项再怎么加 flex-md-wrap 都是摆设。
这不是 Bootstrap 的 bug，而是 CSS Flexbox 的基本规则：方向、对齐、换行这些属性，只在 display: flex 或 display: inline-flex 的容器上生效。
