这个问题在这里已有答案:
我有一个问题,我发现很难解释,因此很难找到正确的答案。
在移动设备上我想要以下布局:
|.info |
----------
|.content|
| content|
| column |
----------
|.map |
但是,在桌面上,这需要响应地适应变为
|.content | .info |
| content |-------|
| column | .map |
我已经尝试找到答案,但我甚至不知道该寻找什么。我尝试了一些Flexbox方法,但它在内容下的新行中以.map结尾,而我希望.map位于内容的右侧,就在.info下面。
您可以轻松地在CSS Grid layout
中执行此操作以及定位移动屏幕的媒体查询 - 请参阅以下演示内联解释:
.wrapper {
display: grid; /* defines a grid container */
grid-template-columns: 1fr 1fr; /* defines a 2-column grid layout */
}
.content {
grid-column: 1; /* place this in the first column */
grid-row: 1 / 3; /* span across the first two rows */
}
.wrapper > *{
border: 1px solid;
}
@media screen and (max-width: 768px) {
.wrapper {
grid-template-columns: 1fr; /* a single column grid container */
}
.content {
grid-row: initial; /* reset the spanning rows in mobile view */
}
}
<div class="wrapper">
<div class="header">info</div>
<div class="content">content</div>
<div class="footer">map</div>
</div>
您肯定可以通过@media查询规则来处理它,这样在桌面布局中您可以使用以下列流:
.my-class {
display: flex;
flex-flow: column;
}
在平板电脑/移动设备上,如下所示:
@media (--small-only) {
flex-flow: row;
}
当然,您必须根据需要定义适当的订单参数。我建议阅读this指南,因为它简单而完整。