css - Flexbox 响应式最后一列 float 和堆叠

Question

抱歉，标题晦涩难懂，但不确定如何措辞。想知道 flexbox 是否可以实现这种响应式布局。

我可以很容易地做一个或另一个 - 但我很难在不创建两个不同的 html 布局的情况下实现以下目标。这可能吗？

.body {
  display: flex;
  flex-direction: column;
}

.main {
  display: flex;
  flex-direction: row;
}

<div class="body">
  <div class="main">
    <div class="1">Div 1</div>
    <div class="2">Div 2</div>
  </div>
  <div class="secondary">
    <div class="3">Div 3</div>
  </div>
</div>

Answer 1

您需要使用 @media queries以确定屏幕的大小并相应地调整大小。即便如此，仅在移动设备上将 3 滑到 1 和 2 下可能是个绝招。尝试使用溢出将其插入适当的区域。不过，其中大部分是基本的 CSS；你不需要 flexbox。