Bootstrap移动端堆叠列布局问题：桌面与移动端列适配异常

看起来你遇到的问题主要来自两个核心点：Bootstrap版本的类名变化，以及可能缺失了栅格的必要容器结构，咱们一步步来解决：

问题根源 #

1. 废弃的类名：如果你用的是Bootstrap 4或更高版本，col-xs-*这个类已经被移除了，取而代之的是col-*（对应最小屏幕尺寸，<576px）。你之前写的col-xs-4在新版本里是无效的，这就导致小屏幕下没有指定宽度，列会默认占满100%宽度（也就是堆叠成col-12的效果）。
2. 缺失.row容器：Bootstrap的栅格列必须包裹在.row容器内，否则栅格的间距、宽度计算都会出问题，也可能导致布局错乱。

修正后的代码 #

按照你的需求（桌面端col-lg-5 | col-lg-2 | col-lg-2 | col-lg-2，移动端全尺寸下col-12 | col-4 | col-4 | col-4），结合移动优先的原则，正确的代码应该是：

<div class="row">
  <!-- 第一列：小屏幕占12列，桌面端占5列 -->
  <div class="col-12 col-lg-5">xxx</div>
  <!-- 后面三列：小屏幕占4列，桌面端占2列 -->
  <div class="col-4 col-lg-2">xxx</div>
  <div class="col-4 col-lg-2">xxx</div>
  <div class="col-4 col-lg-2">xxx</div>
</div>

代码说明 #

• 移动优先写法：先定义最小屏幕（<576px）的样式col-12和col-4，再用col-lg-*覆盖桌面端（≥992px）的样式，这符合Bootstrap的设计逻辑。
• .row容器：必须包裹所有列，它会处理列之间的间距和负边距，确保栅格布局正常工作。

额外排查点 #

如果还是出现堆叠问题，可以检查：

• 有没有自定义CSS覆盖了Bootstrap的栅格样式，比如给列添加了width: 100% !important之类的规则。
• 确认你引入的Bootstrap版本是否正确，若用的是Bootstrap 3，col-xs-*是有效的，但同样需要包裹在.row内，且类顺序建议从小到大屏幕写。

内容的提问来源于stack exchange，提问作者user7474611