我实际上已经能够创建非常相似的东西，但是它有一个排序缺陷，这并不能令我满意，并且我希望在可能的情况下进行修复。
问题在于图像顺序是这样的：
1|4|7|10
2|5|8|11
3|6|9|12
我希望它像这样：
1| 2| 3| 4
5| 6| 7| 8
9|10|11|12
考虑到我正在使用列，我什至不确定，如果不是这样，我将不胜感激任何技巧和指针，以了解如何在没有出现此问题的情况下重新制作布局。
请记住，我将用数据库中的图像填充页面，因此我将无法仅按所需顺序对12张图像进行硬编码。我需要我的图像自动适应。
.home-container {
column-width: 500px;
column-gap: 10px;
columns: 4;
margin: 10px 10px 0 10px;
}
.home-container-element {
text-align: center;
position: relative;
width: 100%;
margin-bottom: 10px;
}
.home-image {
position: relative;
display: block;
width: 100%;
max-height: 800px;
object-fit: cover;
}
@media all and (min-width: 0px) and (max-width: 1200px) {
.home-container {
columns: 1;
}
}
@media screen and (max-width: 1200px) {
.home-container {
columns: 2;
}
}
@media screen and (max-width: 600px) {
.home-container {
columns: 1;
}
}
img {
margin-bottom: 10px;
} <div class="home-container">
<div class="home-container-element">
<img class='home-image' src='https://i.imgur.com/QYe7rsG.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/L0kACh9.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/856XMo4.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/EQ4QB0r.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/rQnpbGp.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/N0DtKV2.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/EByR7rf.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/7C01k0m.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/vv9sNKx.jpg' alt='Random image'/>
<img class='home-image' src='https://i.imgur.com/nlxfMce.jpg' alt='Random image'/>
</div>
</div>