将Flexbox项目推向桌面视图上的右侧

Question

我有一个很难解释的问题，因此很难搜索正确的答案。

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

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

但是，在桌面上，这需要响应地适应

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

我尝试找到答案，但我什至不知道要寻找什么。我已经尝试了几个flexbox方法，但它以内容下的新行中的.map结尾，而我希望在.info下方的内容右侧的.map。

Answer 1

您一定可以通过 @Media 查询规则对其进行处理，因此在桌面布局中，您的列流量如下：

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

和平板电脑/移动布局上：

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

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

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>