直接用 flex-sm-column + flex-md-row 组合即可实现小屏垂直、中屏及以上水平布局，无需自定义css或js；失效主因是类名顺序错误、断点误用或父容器干扰。
直接用 flex-sm-column + flex-md-row 组合就能解决，不需要写自定义 CSS 或 JS；堆叠失效几乎全是类名顺序、断点误用或父容器干扰导致的。
为什么 flex-column 在手机上没生效
单独加 flex-column 会让所有断点都垂直，但你真正要的是“小屏垂直、中屏及以上水平”——这不是失效，是用错了语义。常见问题包括：
-
flex-column和flex-md-row顺序写反了，比如flex-md-row flex-sm-column，后写的类会覆盖前面的 - 父容器用了
d-inline-flex或display: inline-flex，导致flex-direction不继承 - 按钮组嵌在
.input-group或.btn-toolbar里，外层容器自带 flex 设置，优先级更高 - 混用了
<input type="button">，.btn-group只对.btn元素做边框合并，非.btn元素会双倍边框、错位圆角
flex-sm-column 和 flex-md-row 怎么配才对
Bootstrap 4/5 原生支持断点 flex 类，必须按断点从小到大、类名从弱到强排列：
<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覆盖 → 恢复水平
别碰 display: block，它会让按钮组彻底崩坏
强行给按钮或父容器设 display: block 不是修复，而是破坏：
-
.btn-group默认是display: flex，靠它实现按钮紧贴、中间按钮圆角隐藏、边框自动合并 - 设成
block后，每个按钮独占一行，视觉上“堆叠”，但其实是布局崩坏，不是响应式垂直 - 所有按钮左右边框都完整显示，出现双倍边框；
gap失效，因为gap只作用于 flex/grid 容器 - 小屏下可能因换行符或空格渲染出不可控间隙
真正在意居中对齐？得先有高度上下文
如果按钮组放在 .col 里，再加 align-items-center 也居不了中——因为 .row 默认没有高度，交叉轴对齐无参考空间：
- 给父
.row加h-100或min-vh-100 - 避免在
.btn-group内部再套.btn-group，.btn-group-vertical不支持嵌套，嵌套后方向逻辑错乱 - 旧浏览器（如 IE11）不支持
gap，需回退到.btn:not(:first-child) { margin-left: 0.5rem; }，并确认.btn的display是inline-block（Bootstrap 4 默认）
最常被忽略的不是怎么写类，而是父容器有没有创建新堆叠上下文、有没有隐式 transform 或 opacity 干扰 flex 行为，以及按钮是否全是 .btn ——漏掉任何一个，flex-sm-column 就只是看起来像垂直，实际点击区域错位、边框重叠、JS 状态不同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
