我想在这里更改列的顺序：
#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;
}
结果应该是这样的：
有谁知道这个简单的解决方案？
最佳答案
当您想要基于行的订单时,为什么要使用列？看起来像the flex model的工作.如果不更改HTML,您可以这样做：
#container {
position: relative;
width: 600px;
}
#column-wrapper {
display: flex;
flex-wrap: wrap
}
#column-wrapper .column {
display: inline-block;
width: calc(30% - 20px);
padding: 20px 0;
margin: 20px;
background-color: green;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
}