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

html5 • • 问答

我有一个使用 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>
<div>
<div>
<div>Left Sidebar</div>
</div>
<div>
<div>Content</div>
</div>
<div>
<div>Right Sidebar</div>
</div>
</div>
</div>
</main>

回答

您可以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>
    <div>
      <div>
        <div>Left Sidebar</div>
      </div>
      <div>
        <div>Content</div>
      </div>
      <div>
        <div>Right Sidebar</div>
      </div>
    </div>
  </div>
</main>

以上是移动设备上的网站博客页面2侧边栏问题的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容