Bootstrap 5.3响应式列失效：小屏幕布局不生效问题

问题根源 #

你的代码存在两个核心问题：

• 第4个div在md断点（≥768px）错误使用了col-md-4，导致它无法占满整行，同时干扰了小屏布局的表现。
• 冗余的col-sm-6属于多余设置，Bootstrap是移动优先框架，col-6会自动应用到sm及以下所有断点，重复设置反而容易造成混淆。

正确代码实现 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<body class="container-fluid">
<div class="row">
    <div class="col-6 col-md-4 col-lg-3 bg-danger">Div1 respon</div>
    <div class="col-6 col-md-4 col-lg-3 bg-primary">Div2 respon</div>
    <div class="col-6 col-md-4 col-lg-3 bg-success">Div3 respon</div>
    <div class="col-6 col-md-12 col-lg-3 bg-secondary">Div4 respon</div>
</div>
</body>

布局逻辑说明 #

• <768px（xs、sm断点）：所有div使用col-6，每行显示2个div，满足两行两列的需求。
• ≥768px（md断点）：前3个div用col-md-4，刚好填满12列在第一行；第4个div用col-md-12，占满整行单独在第二行。
• ≥992px（lg断点）：所有div用col-lg-3，4个div各占3列，刚好填满12列在同一行。

内容的提问来源于stack exchange，提问作者MIGUEL ANGEL BARDAJI BOSCH