html - 移动设备上的网站博客页面 2 侧边栏问题
问题描述
我有一个使用 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>
解决方案
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>
推荐阅读
- javascript - 如何制作一个为 setTimeout 循环创建切换按钮的函数?
- css - 应用 Primevue 主题
- apache-spark-sql - Databricks Azure 中的结构化流式处理引发异常 - java.lang.IllegalStateException:读取增量文件 dbfs 时出错:/raw_zone/1.delta
- azure-devops - 如何在 Docker Build 步骤的 Artifacts 页面中使用 Nuget 包?
- matlab - 如何在 MATLAB 中编写一个 for 循环作为 while 循环的条件?
- xml - 更正 XPath 以根据嵌套属性获取元素
- css - VueJS路由器活动链接样式到路由器链接内的所有元素
- postgresql - 我不知道如何使用 psql 命令恢复它
- java - AWS JAVA IoT 客户端每 10 分钟重新连接一次
- ios - 使用 AVAssetExportSession 导出文件而不更改其格式(Swift 5)