Bootstrap列堆叠与排序调整技术问题求助

方案一：纯CSS（内容重复，无JS依赖） #

通过Bootstrap响应式显示类分别控制不同屏幕下的内容显示，避免跨父容器移动的问题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <!-- 侧边栏：大屏占3列 -->
    <div class="col-lg-3">
      <!-- 大屏显示的第一行 -->
      <div class="d-none d-lg-block mb-3">
        <div class="p-3 bg-light border">侧边栏第一行（大屏）</div>
      </div>
      <!-- 侧边栏其他内容 -->
      <div class="mb-3">
        <div class="p-3 bg-light border">侧边栏第二行</div>
      </div>
      <div class="mb-3">
        <div class="p-3 bg-light border">侧边栏第三行</div>
      </div>
      <div class="mb-3">
        <div class="p-3 bg-light border">侧边栏第四行</div>
      </div>
    </div>
    <!-- 主体内容：大屏占9列 -->
    <div class="col-lg-9 mb-3">
      <div class="p-3 bg-light border">主体内容区域</div>
    </div>
    <!-- 移动端显示的第一行 -->
    <div class="col-12 d-lg-none">
      <div class="p-3 bg-light border">侧边栏第一行（移动端）</div>
    </div>
  </div>
</div>

说明：

• d-none d-lg-block：大屏（≥992px）显示，移动端隐藏；
• d-lg-none：移动端（<992px）显示，大屏隐藏；
• 移动端页面顺序：侧边栏其他行 → 主体内容 → 侧边栏第一行，完全匹配需求；
• 缺点：内容重复，需同步维护两处相同内容。

方案二：JS动态移动（无内容重复） #

通过监听窗口尺寸变化，动态在父容器间移动侧边栏第一行，解决跨容器排序问题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="container">
  <div class="row" id="main-row">
    <!-- 侧边栏 -->
    <div class="col-lg-3" id="sidebar">
      <div class="row mb-3" id="sidebar-first-row">
        <div class="col-12 p-3 bg-light border">侧边栏第一行</div>
      </div>
      <div class="row mb-3">
        <div class="col-12 p-3 bg-light border">侧边栏第二行</div>
      </div>
      <div class="row mb-3">
        <div class="col-12 p-3 bg-light border">侧边栏第三行</div>
      </div>
      <div class="row mb-3">
        <div class="col-12 p-3 bg-light border">侧边栏第四行</div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="col-lg-9 mb-3" id="main-content">
      <div class="row">
        <div class="col-12 p-3 bg-light border">主体内容区域</div>
      </div>
    </div>
  </div>
</div>

<script>
// 调整侧边栏第一行位置的函数
function adjustSidebarRowPosition() {
  const windowWidth = $(window).width();
  const firstRow = $('#sidebar-first-row');
  // Bootstrap 4的lg断点为992px
  if (windowWidth < 992) {
    // 移动端：移到主row的最后
    if (firstRow.parent().attr('id') === 'sidebar') {
      firstRow.appendTo('#main-row');
    }
  } else {
    // 大屏：移回侧边栏顶部
    if (firstRow.parent().attr('id') !== 'sidebar') {
      firstRow.prependTo('#sidebar');
    }
  }
}

// 页面加载时初始化
adjustSidebarRowPosition();
// 窗口尺寸变化时重新调整
$(window).resize(adjustSidebarRowPosition);
</script>

说明：

• 监听窗口resize事件，根据Bootstrap的lg断点（992px）判断当前视图；
• 移动端将第一行移至主row的最后，大屏时移回侧边栏顶部；
• 无内容重复，维护成本低，依赖jQuery（Bootstrap 4默认依赖）。

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