如何在移动设备的中央内容列之间移动侧边栏列？

Question

我想要一种具有以下元素的情况：

• 左侧边栏
• 主要内容
• 右侧边栏
• 额外内容

我想要完成的是：

• 在较大屏幕上展开时：让“额外内容”紧邻主要内容下方排列，并共享相同的宽度，主要内容和额外内容之间没有间隙。
• 在小屏幕上折叠时：让所有元素以全宽垂直堆叠，但右侧边栏应位于主要内容和额外内容之间。

到目前为止我的尝试：

.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;
}

#sidebar-right {
  float: right;
}

#main {
  background: #ffeecd;
}

#extra {
  background: #ffeecd;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container my-grids">
  <div class="row flex-column flex-sm-row">
    <div id="sidebar-left" class="col col-sm-3 order-sm-1 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div id="main" class="col col-sm-6 order-sm-2 align-self-baseline">
      <div class="">Main Content</div>
    </div>
    <div id="sidebar-right" class="col col-sm-3 order-sm-3 align-self-baseline">
      <div class="tall">Right Sidebar</div>
    </div>
    <div id="extra" class="col col-sm-6 order-sm-4 align-self-baseline">
      <div class="">Extra Content</div>
    </div>

  </div>
</div>

<!-- Have a row which displays the current screen size -->
<div class="container my-size">
  <div class="row">
    <div class="col col-md-12 d-xs-block d-sm-none">Screen is <b>xs</b></div>
    <div class="col col-md-12 d-none d-sm-block d-md-none">Screen is <b>sm</b></div>
    <div class="col col-md-12 d-none d-md-block d-lg-none">Screen is <b>md</b></div>
    <div class="col col-md-12 d-none d-lg-block d-xl-none">Screen is <b>lg</b></div>
    <div class="col col-md-12 d-none d-xl-block d-xxl-none">Screen is <b>xl</b></div>
    <div class="col col-md-12 d-none d-xxl-block">Screen is <b>xxl</b></div>
  </div>
</div>

到目前为止我所拥有的小提琴示例

目前发生的事情：

我想要发生的事情：

我目前正在使用 Bootstrap 3，并且在 Bootstrap 3 中拥有解决方案是理想的选择，但如果这是唯一的方法，我愿意拥有 Bootstrap 4/5 解决方案。

Answer 1

使其正常工作的最简单方法是将

#extra

内容复制到另一个元素中，并显示/隐藏断点的相应内容。

<div class="container my-grids">
  <div class="row">
    <div id="sidebar-left" class="col-sm-3 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div class="col-sm-6 align-self-baseline py-0">
      <div class="row">
        <div id="main" class="col-12 align-self-baseline">
          <div class="">Main Content</div>
        </div>
        <div id="extra" class="col-12 d-none d-sm-block">
          <div class="">Extra Content</div>
        </div>
      </div>
    </div>
    <div id="sidebar-right" class="col-sm-3 align-self-baseline">
      <div class="tall">Right Sidebar</div>
    </div>
    <div id="extra-extra" class="col-12 d-block d-sm-none">
      <!-- repeat extra content here or use js to copy -->
    </div>
  </div>
</div>

您只需使用一些 jQuery 即可复制内容：
（请注意不要在

id

内使用

#extra

，因为它会创建无效的重复项）

$(document).ready(() => {
  $('#extra-extra').html($('#extra').html())
})

https://jsfiddle.net/chan_omega/rkqz81bc/

https://getbootstrap.com/docs/3.4/css/#grid-example-basic https://getbootstrap.com/docs/3.4/css/#grid-nesting