必须显式添加d-flex或响应式d-*flex类才能激活Flex上下文，否则flex-column、flex-md-row等方向类无效；小屏竖排大屏横排的正确写法是d-flex flex-column d-md-flex flex-md-row。
为什么 flex-column + flex-md-row 有时没反应
因为 flex-column 和 flex-md-row 只控制 flex-direction，不负责开启 Flex 上下文。容器若没声明 display: flex，这些类就是纯装饰——浏览器 computed 样式里根本不会出现 display: flex。
- 必须显式加
d-flex或带断点的d-sm-flex/d-md-flex，否则所有方向类（flex-column、flex-md-row等）全部失效 -
d-flex本身无响应式变体，它只在 xs 生效；想在 md 屏也保持 Flex，就得额外写d-md-flex - 验证是否生效：打开开发者工具 → Elements → 查看该元素的 computed 样式 → 确认是否有
display: flex
小屏竖排、大屏横排的最小可行写法
目标是 xs 竖排、md 起横排，且中间不断层。关键不是“切换”，而是“连续覆盖”——每个断点都得有明确的 d-*flex 和方向类。
- 正确写法：
d-flex flex-column d-md-flex flex-md-row -
d-flex激活 xs 尺寸的 Flex 布局，flex-column设为纵向 -
d-md-flex在 ≥768px 时再次启用 Flex（防止回退到 block），flex-md-row覆盖前面的flex-column - 不能省略
d-md-flex：否则 md 屏下容器可能退化为普通块级流，flex-md-row完全不生效
图片置顶 + 文字右对齐？别用 order 类嵌套在 .row 里
常见需求是移动端图片在文字上方、桌面端左右并排。但把 order 类塞进 .row > .col 结构里，基本不可靠——因为 .row 的子项（.col）默认不是直系 Flex 子项，order 对它无效。
- 推荐结构：
d-flex flex-column-reverse d-md-flex flex-md-row - 移动端：
flex-column-reverse让后写的图片视觉上出现在前（顶部） - 桌面端：
d-md-flex激活 Flex，flex-md-row生效，flex-column-reverse被覆盖，恢复自然 DOM 顺序 - 配合
col-md-6控制宽度即可，无需 JS 或 media query
最容易被忽略的底层逻辑
Flex 工具类不是独立开关，它们依赖容器是否真正进入 Flex 上下文。漏掉任何一个 d-*flex，整个响应式链条就断了——尤其在嵌套结构里，父容器没开 d-flex，子项再怎么加 flex-md-wrap 都是摆设。
DOM 顺序和视觉顺序分离后，可访问性仍按源码读；别指望 order 类能在复杂布局中稳定工作。统一收口到容器级 d-flex，才是最稳的路径。
