直接加 flex-sm-column 就能实现小屏垂直、中屏及以上恢复水平，无需 js 或自定义 css；flex-column 在手机上没生效是因为它作用于所有断点，而响应式需用 flex-sm-column 配合 flex-md-row 且顺序不能颠倒。
直接加 flex-sm-column 就能实现小屏垂直、中屏及以上恢复水平，不需要 JS，也不用写自定义 CSS。
为什么 flex-column 在手机上没生效？
单独加 flex-column 会让所有断点都垂直，但手机端通常只是「需要垂直」，桌面端仍要水平——所以它不是失效，而是用错了场景。常见误操作：
- 只加
flex-column，没考虑断点覆盖逻辑 - 类名顺序写反了，比如
flex-md-row flex-sm-column，后写的flex-md-row会覆盖前面的，结果所有尺寸都是水平 - 父容器本身有
d-inline-flex或display: inline-flex，干扰了 flex-direction 的继承 - 按钮组嵌套在
.input-group或.btn-toolbar里，外层容器自带 flex 设置，优先级更高
flex-sm-column 和 flex-md-row 怎么配？
Bootstrap 5/4 原生支持带断点的 flex 工具类，flex-sm-column 表示 ≥576px（sm）起生效，flex-md-row 表示 ≥768px（md）起生效。组合使用时必须按断点从小到大、类名从弱到强排列：
<div class="btn-group flex-sm-column flex-md-row"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-secondary">B</button> <button type="button" class="btn btn-outline-dark">C</button> </div>
这样效果是：
- xs（
- sm（≥576px）：
flex-sm-column生效 → 垂直 - md（≥768px）：
flex-md-row覆盖前面的 column → 恢复水平
用 .btn-group-vertical 还是 flex-* 类？
二者都能垂直，但底层逻辑和兼容性不同：
-
.btn-group-vertical是 Bootstrap 专为按钮组设计的语义类，自动处理边框合并、圆角衔接，只对.btn元素生效；若混用<input type="button">，它就失效 -
flex-column是通用 Flex 工具类，不关心子元素类型，但不会自动修边框——按钮之间会有双倍边框或错位圆角 - v3 不支持
flex-*类，只能用.btn-group-vertical或手写 CSS；v4/v5 推荐优先用flex-sm-column组合，更灵活
真正容易被忽略的是：如果按钮组放在 .col 里且没设高度上下文，垂直后用 align-items-center 也居不了中——得给父 .row 加 h-100 或 min-vh-100，否则交叉轴对齐无参考空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
