必须显式添加 d-flex 或带断点的 d-sm-flex 类，否则 flex-column、flex-md-row 等方向类因缺少 display: flex 而完全失效；正确写法如 d-flex flex-column d-md-flex flex-md-row，确保各断点下 Flex 上下文连续激活。
必须显式加 d-flex 或带断点的 d-sm-flex 类，否则 flex-column、flex-md-row 这类方向类完全不生效。
为什么 flex-column flex-md-row 有时没反应
因为 Flex 方向类只设置 flex-direction，前提是容器已声明 display: flex。Bootstrap 的 d-flex 才提供这个声明，而它本身没有响应式变体——d-sm-flex、d-md-flex 才有。
-
flex-column在所有尺寸生效，但若父容器没加d-flex或对应断点的d-*flex，它只是个无效样式 - 常见错误写法：
<div class="flex-column flex-md-row">—— 缺少d-flex，computed 样式里根本看不到display: flex - 验证方法：打开开发者工具，检查该元素的 computed 样式中是否有
display: flex；没有，就说明d-*flex类缺失
小屏竖排、大屏横排的最小可行写法
目标是 xs 竖排、md 起横排，且中间不断层。关键在于断点连续覆盖 + 类顺序正确。
- 正确写法：
<div class="d-flex flex-column d-md-flex flex-md-row"> -
d-flex启用 xs 尺寸的 Flex 布局，flex-column设为纵向 -
d-md-flex在 ≥768px 时再次启用 Flex（覆盖掉可能的非 Flex 回退），flex-md-row覆盖flex-column，切为主轴水平 - 不能省略
d-md-flex：否则在 md 屏下，容器可能回退到 block 流，flex-md-row失效
图片置顶 + 文字右对齐？用 flex-column-reverse 更可靠
如果需求是移动端图片在文字上方、桌面端左右并排（比如图文介绍），别依赖 order 类嵌套在 .row 里——.row 默认虽是 flex，但子项 .col 若未显式设 d-flex，order-sm-first 不起作用。
- 推荐结构：
<div class="d-flex flex-column-reverse d-md-flex flex-md-row"><div>文字</div><div>图片</div></div> - 移动端：
flex-column-reverse让后写的图片出现在前（顶部） - 桌面端：
d-md-flex激活 flex，flex-md-row生效，flex-column-reverse被覆盖，恢复自然顺序 - 配合
col-md-6控制宽度，无需额外 media query 或 JS
最容易被忽略的是：Flex 工具类不是“独立开关”，它们依赖容器是否真正进入 Flex 上下文。漏掉任何一个 d-*flex，整个响应式链条就断了——尤其在嵌套结构里，父容器没开 d-flex，子项再怎么加 flex-md-wrap 都是摆设。
