html - CSS布局两列，第二列缩进

Question

我试图在不将其分成两个单独的包装列的情况下进行此布局。它应该是一个 div 列表。 但是第二列应该以 margin-top 或 indent 开头。

sample photo

目前我已经在包装器内完成了 2 列，但这意味着第二列中的元素将被推送到移动设备中的第一列之后。不想这样。

代码应该是这样的:

<div class="items-wrapper">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>

编辑: 我试着这样做: https://codepen.io/wackou/pen/pozEybR

也许有更好的方法？

Answer 1

也许给“items-wrapper”类一个 flex 属性，然后将 flex 方向更改为 column