移动设备上的网站博客页面 2 侧边栏问题

Question

我有一个使用 bootstrap 4 的博客页面，它有左右边栏和主要内容。

在桌面上，它工作得很好。

但是在手机上，它们按以下顺序堆叠：- left-sidebar>content>right-sidebar。

我想要的是在手机上，它们必须按以下顺序出现：- content>left-sidebar>right-sidebar

我为此做了一个演示

body {
padding: 40px;
}
.left-sidebar, .content, .right-sidebar {
min-height: 300px; margin-bottom: 40px;border: 1px solid #aaa;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>

<main>
<div class="container text-center">
<div class="row">
<div class="col-md-2">
<div class="left-sidebar p-4">Left Sidebar</div>
</div>
<div class="col-md-7">
<div class="content p-4">Content</div>
</div>
<div class="col-md-3">
<div class="right-sidebar p-4">Right Sidebar</div>
</div>
</div>
</div>
</main>

Answer 1

您可以order在移动断点处使用 CSS属性。

body {
  padding: 40px;
}

.left-sidebar,
.content,
.right-sidebar {
  min-height: 300px;
  margin-bottom: 40px;
  border: 1px solid #aaa;
}

@media only screen and (max-width: 800px) {
  .col-md-2 {
    order: 2;
  }
  .col-md-7 {
    order: 1;
  }
  .col-md-3 {
    order: 3;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

<main>
  <div class="container text-center">
    <div class="row">
      <div class="col-md-2">
        <div class="left-sidebar p-4">Left Sidebar</div>
      </div>
      <div class="col-md-7">
        <div class="content p-4">Content</div>
      </div>
      <div class="col-md-3">
        <div class="right-sidebar p-4">Right Sidebar</div>
      </div>
    </div>
  </div>
</main>