为何col-lg-5在小屏幕下无法堆叠？无溢出情况

你的布局在小屏幕没法正常堆叠，核心是两个原因：

• Flex容器默认不允许子元素换行，屏幕宽度不足时只会挤压元素而不会自动换行
• 仅使用col-lg-5意味着只有大屏幕（lg断点以上）才会应用5列宽度，小屏幕下没有宽度规则，配合flex的默认行为就会出现布局异常

直接按下面的方式修改即可解决：

1. 给Flex容器添加换行属性 #

修改.for-flex的CSS，加上flex-wrap: wrap让子元素在宽度不够时自动换行，还可以添加gap属性统一子元素间距，避免换行后margin重复：

.for-flex{
  display:flex;
  justify-content:space-around;
  flex-wrap: wrap; /* 关键：允许子元素换行 */
  gap: 20px; /* 子元素之间的间距，比margin更省心 */
}
.requirement-main-div{
  box-shadow: 0px 0px 15px rgb(0 0 0 / 5%);
  margin-top: 40px;
  border-radius: 15px;
  padding: 40px;
  min-width: 300px; /* 可选：设置最小宽度，避免元素被压得过窄 */
}

2. 优化HTML的栅格类（如果使用Bootstrap） #

给两个内容div添加col-12类，这样在小屏幕（xs断点）下会占满整行，大屏幕下保持col-lg-5的宽度：

<div class="for-flex"> 
  <div class="requirement-main-div col-12 col-lg-5">
    <h6>• lorem ipsum.<sup>*</sup> </h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. </h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. <sup>**</sup></h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. </h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. </h6>
    <br>
    <p style="margin-bottom:0px; font-size:10px;"><sup>*</sup> Lorem ipsum lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.</p>
    <p style="margin-bottom:0px; font-size:10px;"><sup>**</sup> Lorem ipsumlorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.</p>
  </div>
  <div class="requirement-main-div col-12 col-lg-5">
    <h6>• lorem ipsum.<sup>*</sup> </h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. </h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. <sup>**</sup></h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. </h6>
    <br>
    <h6>• lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum. </h6>
    <br>
    <p style="margin-bottom:0px; font-size:10px;"><sup>*</sup> Lorem ipsum lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.</p>
    <p style="margin-bottom:0px; font-size:10px;"><sup>**</sup> Lorem ipsumlorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.</p>
  </div>
</div>

不使用Bootstrap的替代方案 #

如果没在用Bootstrap，直接通过媒体查询给小屏幕的内容div设置100%宽度：

@media (max-width: 992px) { /* 该宽度对应Bootstrap的lg断点，可根据需求调整 */
  .requirement-main-div{
    width: 100%;
  }
}

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