网站博客第2页手机侧边栏问题

Question

我有一个使用引导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

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

​

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>

​

Answer 2

我认为您在CSS中使用了媒体查询或网格布局。

CSS网格布局模块提供了一个基于网格的布局系统，包括行和列，这样可以更容易地设计网页，而不必使用浮点数和定位。