我想在这里更改列的顺序:
结果应该是这样的:
有人知道一个简单的解决方案吗?
#container {
position: relative;
width: 600px;
}
#column-wrapper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
#column-wrapper .column {
display: inline-block;
width: 100%;
padding: 20px 0;
margin-bottom: 20px;
background-color: green;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
}
<div id="container">
<div id="column-wrapper">
<div class="column">
<span>1</span>
</div>
<div class="column">
<span>2</span>
</div>
<div class="column">
<span>3</span>
</div>
<div class="column">
<span>4</span>
</div>
<div class="column">
<span>5</span>
</div>
<div class="column">
<span>6</span>
</div>
</div>
</div>
![列数](https://istack.dev59.com/GrKmH.webp)