Question

我遇到一个难以解释的问题，因此很难找到正确的答案。

在移动设备上，我想要以下布局：

|.info   |
----------
|.content|
| content|
| column |
----------
|.map    |

但是，在台式机上，这需要做出相应的调整才能变得

|.content   | .info |
| content   |-------|
|  column   | .map  |

我试图找到答案，但我什至不知道要寻找什么。我尝试了几种Flexbox方法，但是它以.map结尾于内容下的新行中，而我希望.map位于内容的右侧，即.info下。

Answer 1

您可以肯定地通过 @media 查询规则来处理它，这样在桌面布局中，您将具有如下所示的列流：

.my-class {
    display: flex;
    flex-flow: column;
}

在平板电脑/移动设备上的布局如下：

@media (--small-only) {
    flex-flow: row;
}

当然，您必须根据需要定义适当的 order 参数。我建议您阅读this指南，因为它简单而完整。

Answer 2

您可以在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>

在桌面视图上将flexbox项推到右侧

2 个答案: