Bootstrap响应式布局问询：移动端右侧边栏移至主内容与额外内容间

需求说明 #

• 大屏状态：额外内容紧接主内容下方，与主内容同宽且无间隙
• 小屏（移动端）状态：所有元素垂直全屏堆叠，右侧边栏位于主内容与额外内容之间

当前问题 #

大屏状态下，侧边栏或主内容高度变化时，额外内容无法始终紧贴主内容下方，布局出现错乱；小屏状态符合预期。优先需要Bootstrap 3解决方案，也可接受Bootstrap 4/5方案。

Bootstrap 3 解决方案 #

Bootstrap 3基于浮动栅格，通过拆分右侧边栏的显示逻辑，结合响应式显示类实现需求：主内容与额外内容放在同一列容器内，确保额外内容始终跟随主内容；同时在小屏和大屏分别显示对应的右侧边栏元素，保证顺序正确。

代码实现 #

HTML

<div class="container">
  <div class="row">
    <!-- 左侧边栏 -->
    <div class="col-sm-3">
      <div class="tall">Left Sidebar</div>
    </div>

    <!-- 主内容 + 额外内容容器 -->
    <div class="col-sm-6">
      <div id="main" class="tall">Main Content</div>
      <!-- 小屏专属右侧边栏 -->
      <div class="visible-xs-block">
        <div id="sidebar-right-mobile" class="tall">Right Sidebar</div>
      </div>
      <div id="extra" class="xtall">Extra Content</div>
    </div>

    <!-- 大屏专属右侧边栏 -->
    <div class="col-sm-3 hidden-xs">
      <div id="sidebar-right-desktop" class="tall">Right Sidebar</div>
    </div>
  </div>
</div>

<!-- 屏幕尺寸提示 -->
<div class="container my-size">
  <div class="row">
    <div class="col-xs-12 visible-xs">Screen is <b>xs</b></div>
    <div class="col-xs-12 visible-sm">Screen is <b>sm</b></div>
    <div class="col-xs-12 visible-md">Screen is <b>md</b></div>
    <div class="col-xs-12 visible-lg">Screen is <b>lg</b></div>
  </div>
</div>

CSS

.row {
  background: #dfdfdf;
}
[class^="col-"] {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
}
.tall {
  height: 100px;
}
.xtall {
  height: 200px;
}
.container.my-size .row {
  margin-top: 30px;
}
.container.my-size .row [class^="col-"] {
  background: #cdceff;
}
#main, #extra {
  background: #ffeecd;
  border: solid 1px #6c757d;
  padding: 10px;
  margin-bottom: 0; /* 消除主内容与额外内容的间隙 */
}
#sidebar-right-mobile {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
  margin: 10px 0; /* 小屏下与上下元素的间距 */
}

Bootstrap 4/5 解决方案 #

利用栅格嵌套+响应式显示类，和Bootstrap 3思路一致；嵌套方式可避免Flex布局中元素高度影响位置的问题，逻辑更直观。

代码实现 #

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<div class="container my-grids">
  <div class="row">
    <!-- 左侧边栏 -->
    <div id="sidebar-left" class="col-12 col-sm-3">
      <div class="tall">Left Sidebar</div>
    </div>

    <!-- 主内容 + 额外内容容器 -->
    <div class="col-12 col-sm-6">
      <div id="main" class="xtall">Main Content</div>
      <!-- 小屏专属右侧边栏 -->
      <div class="d-block d-sm-none my-3">
        <div id="sidebar-right-mobile" class="tall">Right Sidebar</div>
      </div>
      <div id="extra" class="">Extra Content</div>
    </div>

    <!-- 大屏专属右侧边栏 -->
    <div id="sidebar-right-desktop" class="col-12 col-sm-3 d-none d-sm-block">
      <div class="tall">Right Sidebar</div>
    </div>
  </div>
</div>

<!-- 屏幕尺寸提示 -->
<div class="container my-size">
  <div class="row">
    <div class="col d-xs-block d-sm-none">Screen is <b>xs</b></div>
    <div class="col d-none d-sm-block d-md-none">Screen is <b>sm</b></div>
    <div class="col d-none d-md-block d-lg-none">Screen is <b>md</b></div>
    <div class="col d-none d-lg-block d-xl-none">Screen is <b>lg</b></div>
    <div class="col d-none d-xl-block d-xxl-none">Screen is <b>xl</b></div>
    <div class="col d-none d-xxl-block">Screen is <b>xxl</b></div>
  </div>
</div>

CSS

.row {
  background: #dfdfdf;
}
.col {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
}
.tall {
  height: 100px;
}
.xtall {
  height: 200px;
}
.container.my-size .row {
  margin-top: 30px;
}
.container.my-size .row .col {
  background: #cdceff;
}
#main, #extra {
  background: #ffeecd;
  border: solid 1px #6c757d;
  padding: 10px;
  margin-bottom: 0; /* 消除主内容与额外内容的间隙 */
}

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