Css 如何在5个元素末尾的第二列上传递一个元素？

我想能够通过另一列的第五个元素，就像我所附的图片一样

我用flexbox做了一些尝试

<div class="container">
    <div class="field">element 1</div>
    <div class="field">element 2</div>
    <div class="field">element 3</div>
    <div class="field">element 4</div>
    <div class="field">element 5</div>
    <div class="field">element 6</div>
</div>

---

谢谢大家!

您可以为每个列指定用户顺序

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

---

您可以为每个列指定用户顺序

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

---

CSS网格可以做到这一点，只要您确定最大行数

有5行的示例

.container{
显示：内联网格；
网格模板行：重复（5，最大内容）；
网格自动流：列；
间距：1米；
填充：1em；
}
.场{
边框：1px纯红；
填充：.5em；
背景：浅蓝色；
}

要素1
要素2
要素3
要素4
要素5
要素6

CSS网格可以做到这一点，前提是您确定最大行数

有5行的示例

.container{
显示：内联网格；
网格模板行：重复（5，最大内容）；
网格自动流：列；
间距：1米；
填充：1em；
}
.场{
边框：1px纯红；
填充：.5em；
背景：浅蓝色；
}

要素1
要素2
要素3
要素4
要素5
要素6

是的，但是如何让它在新列上重新排列？是的，谢谢，但我不想创建两个列。就说第六个元素在右上角。所以这是不可能的？是的，但是你如何让它在一个新的专栏上再次排列？是的，谢谢，但我不想创建两个专栏。就说第六个元素在右上角。那就不可能了？