Bootstrap 4两列布局：如何实现<375px窄屏时图片全宽

核心问题根源 #

现有代码使用Bootstrap默认的等宽.col类做左右分栏，没有针对小屏做布局断点配置，所有尺寸下都会保持左右两列的固定结构，导致宽度较小时图片被挤压在窄列中不断缩小。

实现逻辑 #

利用Bootstrap栅格系统的Flex布局特性，自定义375px宽度的响应式切换阈值：

之所以自定义断点，是因为Bootstrap默认的小屏切换阈值为576px，如果直接使用自带的栅格类，会在<576px时就提前切换为上下堆叠，无法匹配要求的375px切换节点。

• 当屏幕宽度≥375px时，保持原有左右等宽分栏的布局，图片居左、文字居右
• 当屏幕宽度<375px时，将两个分栏的宽度调整为100%占满整行，因DOM默认顺序为图片在前、文字在后，自然形成图片在上、文字在下的堆叠效果，搭配图片自带的img-fluid类实现图片全宽展示

具体代码修改 #

1. 给所有需要做布局切换的列添加统一标识类，把原来列元素的class="col"修改为class="col col-responsive"
2. 补充自定义CSS规则，实现375px断点的布局切换：

   @media (max-width: 374.98px) {
     .col-responsive {
       flex: 0 0 100%;
       max-width: 100%;
     }
   }
   

效果验证说明 #

• 屏幕宽度≥375px时，完全保留原有的左右分栏视觉效果，不会打乱原有大屏幕下的布局逻辑
• 屏幕宽度<375px时，两个列自动撑满整行，图片因为带有img-fluid类的默认规则（最大宽度100%、高度自适应），会自动匹配容器宽度实现全宽展示，不会因为列变窄而强制缩小在左列
• 该方案纯CSS实现，无额外JavaScript依赖，加载性能更好，也不会出现布局抖动问题

注意：媒体查询的断点值建议设置为374.98px，而非整数375px，避免出现临界值时的布局错位，适配不同设备的实际渲染宽度。

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