使用Flex CSS与Bootstrap实现侧边栏拆分的响应式布局咨询

核心思路 #

原实现的问题在于将两个侧边栏嵌套在同一个右侧列容器中，导致视口缩窄时两个侧边栏只能整体下移到主内容下方。将三个内容块（顶部侧边栏、主内容、底部侧边栏）调整为同一网格容器的直接子元素，通过响应式网格规则控制排布即可实现需求，仅需少量自定义CSS，无需插件或JavaScript。

完整代码示例 #

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 可替换为你项目内的Bootstrap5本地资源 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 仅在lg及以上断点生效的网格规则，可自行调整断点阈值 */
    @media (min-width: 992px) {
      .custom-responsive-grid {
        display: grid;
        grid-template-columns: 2fr 1fr; /* 左右列宽度比例，可按需修改 */
        grid-template-rows: auto auto;
        gap: 1rem; /* 区块间距，可和Bootstrap的gutter规则对齐 */
      }
      .main-content {
        grid-row: 1 / span 2; /* 主内容跨两行占满左列 */
        grid-column: 1;
      }
      .sidebar-top {
        grid-row: 1;
        grid-column: 2;
      }
      .sidebar-bottom {
        grid-row: 2;
        grid-column: 2;
      }
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <div class="custom-responsive-grid">
      <!-- 顶部侧边栏：小屏时排在最前，大屏时在右列上方 -->
      <div class="sidebar-top bg-light p-3 border rounded">
        顶部侧边栏内容
      </div>
      <!-- 主内容：小屏时排在中间，大屏时占满左列 -->
      <div class="main-content bg-white p-3 border rounded" style="min-height: 400px;">
        主内容区域
      </div>
      <!-- 底部侧边栏：小屏时排在最后，大屏时在右列下方 -->
      <div class="sidebar-bottom bg-light p-3 border rounded">
        底部侧边栏内容
      </div>
    </div>
  </div>
</body>
</html>

适配逻辑说明 #

• ≥992px（桌面端）：自动变为两列布局，主内容占左侧整列高度，右侧上下排布两个侧边栏，匹配初始视图要求
• <992px（平板/移动端）：自动变为单列布局，顺序为顶部侧边栏→主内容→底部侧边栏，完全符合拆分适配的需求
• 如需调整切换布局的断点阈值，仅需修改@media规则中的min-width参数即可

如果优先使用Flexbox实现，也可以通过给容器加flex-wrap: wrap属性，配合Bootstrap自带的order-*响应式顺序类实现，逻辑和网格方案一致，仅需额外调整大屏下侧边栏的宽度对齐规则，优先推荐网格方案，代码更简洁、容错率更高。

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