必须显式添加 d-flex 或带断点的 d-sm-flex 等类启用 Flex 上下文，否则 flex-column、flex-md-row 等仅修改 flex-direction 的类无效；因它们不启用 display: flex，缺失则 computed 样式无 flex，导致响应式失效。
必须显式加 d-flex 或带断点的 d-sm-flex 类，否则 flex-column、flex-md-row 等方向类根本不会生效——它们只改 flex-direction，不负责启用 Flex 上下文。
为什么 flex-column + flex-md-row 有时没反应
常见现象：写了 flex-column flex-md-row，但中屏（sm/md）下仍是竖排或完全无变化。
- 根本原因是容器在 sm/md 断点下缺失
d-sm-flex或d-md-flex，导致 computed 样式里根本没有display: flex -
flex-column默认对所有尺寸生效，但它依赖父容器已进入 Flex 模式；没d-flex或对应断点的d-*flex，它就是个废样式 - 验证方法：打开开发者工具 → Elements → 查看该元素的 Computed 样式 → 搜索
display→ 若没flex，就说明漏了d-*flex类
小屏竖排、大屏横排的最小可行写法
目标是 xs 竖排、md 起横排，且中间不断层。关键不是“切换”，而是“连续覆盖”。
- 正确写法：
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-sm-first 套在 .col 里——.row 虽是 Flex，但子项若没显式加 d-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被覆盖，恢复自然顺序 - 配合
col-md-6控制宽度即可，无需额外 media query 或 JS
最容易被忽略的是：Flex 工具类不是独立开关，它们依赖容器是否真正进入 Flex 上下文。漏掉任何一个 d-*flex，整个响应式链条就断了——尤其在嵌套结构里，父容器没开 d-flex，子项再怎么加 flex-md-wrap 都是摆设。
