Bootstrap如何设置Flex项目在大屏时改变排列模式

必须显式添加 d-md-flex（或对应断点的 d-flex）才能使 flex-md-row 生效；仅写 flex-column flex-md-row 在中屏下仍为块级流，因 flex-md-row 仅设 flex-direction: row，不开启 Flex 上下文，需 d-flex 触发 display: 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 或 JS，使用 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，就等于没有启动。