如何实现桌面端两列flex布局在414px宽移动端自动转为单列

解决方案 #

你当前用的是Bootstrap栅格系统，默认col-6会在所有尺寸下都占50%宽度，只要调整栅格类或加少量自定义CSS就能实现需求，以下两种方案可选：

方案1：用Bootstrap原生响应式类（无额外代码，适配绝大多数移动端场景）

直接把两个列的col-6类替换为col-12 col-sm-6即可，修改后的HTML代码如下：

<div class="row">
    <div class="col-12 col-sm-6">
        <img src="//some image in here" alt="" class="img-fluid d-block mx-auto">
    </div>
    <div class="col-12 col-sm-6">
        <p class="text-justify noto-sans py-5" style="letter-spacing: 0.02em; line-height: 25px; font-size: 14px;"> some text in here</p>
    </div>
</div>

这个方案用Bootstrap默认的sm断点（576px）做分界：宽度≥576px时保持两列布局，宽度<576px时自动切换为单列，覆盖绝大多数手机设备的尺寸需求。

方案2：精准适配414px断点（需加自定义CSS）

如果要求严格以414px作为分界点，保留原有HTML结构不变，新增如下CSS代码即可：

/* 务必确保head中已加viewport标签，否则响应式不生效：<meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@media (max-width: 414px) {
  .row .col-6 {
    width: 100% !important;
  }
  /* 可选：调整移动端上下模块间距，避免太紧凑 */
  .row .col-6:first-of-type {
    margin-bottom: 16px;
  }
}

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