很多开发者都遇到过这个坑：必须显式添加 d-md-flex（或对应断点的 d-*flex）才能让 flex-md-row 真正生效。如果只写 flex-column flex-md-row，在中屏（如 sm/md）下容器依然是块级流，不会自动变成横向排列。因为 flex-md-row 只设置了 flex-direction: row，并没有开启 Flex 上下文——这个任务需要 d-flex 来完成。
这个常见错误让不少开发者头疼——必须显式添加 d-md-flex（或对应断点的 d-*flex），flex-md-row 这类方向类才会生效。如果只写 flex-column flex-md-row，在中等屏幕（sm/md）下容器大概率还是块级流，不会出现你期望的“大屏横向排列”效果。
为什么 flex-md-row 在大屏上不生效？
原因并不复杂：flex-md-row 只负责设置 flex-direction: row，但不会自动开启 Flex 上下文——这个任务必须由 d-md-flex 完成。一旦遗漏，浏览器就不会将容器视为 Flex 容器，所有方向、换行、对齐相关的类都会失效。
- 打开浏览器开发者工具，检查该元素的 Computed 样式，确认是否有
display: flex；如果没有，说明缺少d-*flex类 - 常见错误写法：
class="flex-column flex-md-row"—— 缺少d-flex或d-md-flex，导致容器在 md 尺寸下依然是display: block d-flex不带断点，而d-sm-flex、d-md-flex才是带断点的“开关”类
d-flex flex-column flex-md-row 是最简可靠方案
这是实现“小屏幕纵向排列、大屏幕横向排列”的最简且可靠的写法，关键在于类名顺序和断点连续覆盖。
d-flex：从 xs 尺寸开始启用 Flex 布局flex-column：默认设置主轴为纵向（在 xs 尺寸生效）flex-md-row：从 768px 起将主轴改为横向，且必须放在后面，否则会被flex-column覆盖- 避免使用
flex-column flex-lg-row：sm/md 断点区间会出现断层，子项会按文档流自然堆叠，布局失控
图文上下/左右切换使用 flex-column-reverse + 断点方向覆盖
例如，移动端希望图片在上、文字在下，桌面端则左右并排——不需要依赖 order 或 JavaScript，使用 Flex 方向反转最简洁。
- 保持语义顺序（先写文字再写图片），容器添加：
class="d-flex flex-column-reverse d-md-flex flex-md-row" - 移动端：
flex-column-reverse让图片在视觉上位于文字上方 - 桌面端：
d-md-flex激活 Flex，flex-md-row生效，自动取消 reverse 效果，恢复源码顺序 - 配合
col-md-6控制宽度，确保两栏等宽并列；小屏下由于是 column 布局，自然垂直堆叠
真正容易被忽略的一点是：Flex 工具类并非独立开关，它们全部依赖容器是否真正进入 Flex 上下文。在嵌套结构中，如果父容器缺少一个 d-md-flex，子项即使写了 flex-md-wrap 也毫无作用——在 computed 样式里看不到 display: flex，就意味着没有生效。
