CSS Column Count - Change order
Why are you using columns when you want a row based order ? Looks like a job for the flex model. Without changing your HTML you can do this:
#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;
}<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>