Bootstrap section内图文响应式布局：手机端排版异常求助

问题重现 #

需求是在<section>内实现Bootstrap响应式布局：

• 桌面端（≥768px）：文字与图片左右并排
• 移动端（<768px）：图片自动移至文字下方

但出现异常：

• 直接拖拽Brave浏览器窗口调整尺寸时，布局符合预期
• 手机端访问或浏览器调试模式手动切换屏幕尺寸时，图片无法下移
• 移除<section>标签后，布局恢复正常

核心原因排查 #

大概率是<section>标签被全局CSS或自定义样式修改了布局属性，导致Bootstrap的栅格/响应式规则被覆盖：

• 最常见的情况是给<section>设置了display: flex但未添加flex-wrap: wrap，或者固定了flex-direction: row且未做响应式切换
• 其次是<section>被设置了固定宽度、float属性，或者继承了其他破坏栅格布局的样式
• 若缺少正确的viewport meta标签，移动端调试模式下Bootstrap的断点会失效

解决方案 #

1. 清除section的干扰样式 #

检查项目中是否有针对section的全局样式，比如：

/* 错误示例：阻止换行导致移动端无法下移 */
section {
  display: flex;
  flex-wrap: nowrap;
}

修正为：

/* 允许换行，并在移动端切换为垂直布局 */
section {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  section {
    flex-direction: column;
  }
}

如果不需要给section加flex布局，直接移除相关自定义样式即可。

2. 严格遵循Bootstrap栅格嵌套规则 #

确保section内使用标准的Bootstrap容器结构，不要直接在section上套用栅格类：

<section>
  <!-- 必须嵌套container/container-fluid -->
  <div class="container">
    <!-- 用row包裹列 -->
    <div class="row">
      <!-- 桌面端占6列，移动端自动占满12列 -->
      <div class="col-md-6">
        <p>这里是文字内容</p>
      </div>
      <div class="col-md-6">
        <img src="your-image.jpg" alt="示例图片" class="img-fluid">
      </div>
    </div>
  </div>
</section>

3. 确认viewport标签正确设置 #

在HTML头部添加正确的viewport元标签，这是Bootstrap响应式生效的基础：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

4. 排除Brave浏览器的缓存/特殊渲染 #

若仍有问题，清除Brave浏览器缓存，关闭Shields功能后重新测试，避免浏览器扩展或隐私设置影响渲染。

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