html - 垂直和水平更改移动和桌面的块顺序

Question

我正在尝试创建一个布局，该布局允许我更改移动设备和桌面设备之间的元素顺序，如下图所示：

我已经按照编号的顺序在单个容器中的 DOM 中对它们进行了排序。我试图让第二个项目显示在左侧，如图所示。我尝试使用 flex 但无法正确处理。我还尝试将第二个 div 向左浮动，其余的向右浮动，但这很混乱，尤其是当右列中的第 4 个元素与第 3 个元素重叠时。

有人可以帮我吗？

谢谢

标签： htmlcssflexbox

Answer 1

这可能更适合CSS 网格布局和媒体查询。

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

@media(min-width: 375px) {
  .container {
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(2, 1fr);
  }

  .child2 {
    grid-row-start: 1;
    grid-row-end: 4;
  }
}

<div class="container">
  <div>1</div>
  <div class="child2">2</div>
  <div>3</div>
  <div>4</div>
</div>