必须同时添加 d-md-flex 和 flex-md-row 才能使中屏横排生效，因为 flex-md-row 仅设置 flex-direction: row，而 d-md-flex 才启用 display: flex !important（≥768px）。
为什么只加 flex-md-row 不生效
很多人写 flex-md-row 却发现中屏没变横排，根本原因是：这个类只设置 flex-direction: row，但前提是容器得是 display: flex。而 Bootstrap 中只有 d-flex、d-md-flex 这类才真正控制 display 属性。不加 d-md-flex，哪怕写了 flex-md-row，computed 样式里也看不到 display: flex，整个 flex 布局压根没启动。
d-md-flex 的实际触发条件
d-md-flex 在屏幕宽度 ≥ 768px（即 Bootstrap 的 md 断点）时启用 display: flex !important；小于该宽度时，它不生效，元素回退到默认显示模式（通常是 display: block）。注意：
- 它不会“继承”或“延续”其他断点的 flex 状态——比如没写
d-sm-flex，那在 576–767px 区间就是普通块级流 - 它和
d-none组合是安全的：d-none d-md-flex能实现“移动端彻底隐藏，中屏起显示为 flex 容器” - 别在
.row上重复加d-md-flex：.row已是 flex 容器，额外添加可能干扰栅格的负 margin 行为
常见错误组合与正确写法对比
错误写法看似合理，实则中间断层：
-
flex-column flex-lg-row→ xs 竖排，lg+ 横排，但 sm/md 下仍是block流，子项堆叠无序 -
d-flex flex-column flex-lg-row→ xs 就启用 flex 且竖排，lg+ 横排，但 sm/md 仍竖排（没覆盖），不是“小屏竖、大屏横”的完整切换
正确写法要连续覆盖断点：
- 小屏竖、中屏起横：
d-flex flex-column flex-md-row - 小屏隐藏、中屏起显示为横排 flex：
d-none d-md-flex flex-md-row - 图文上下切左右（语义顺序不变）：
d-flex flex-column-reverse flex-md-row，再配col-md-6控制子项宽度
验证是否真生效的唯一方法
打开浏览器开发者工具，选中目标元素，在 Styles 或 Computed 面板里直接搜 display。必须看到 display: flex（且带 !important）才算成功。如果只看到 display: block 或没这一项，说明 d-md-flex 没命中，或者被更高优先级的自定义 CSS 覆盖了。这时候别调 justify-content 或 align-items，先解决容器本身没 flex 起来的问题。
