html - 将 flexbox 项目推送到桌面视图的右侧

Question

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

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

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

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

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

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

标签： htmlcssflexbox

Answer 1

您当然可以通过@media查询规则来处理它，这样在桌面布局中您的列流如下：

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

在平板电脑/手机布局上是这样的：

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

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