Can I order my CSS columns horizontally instead of vertically?

Question

Here is my code:

.column {      column-count: 4;      column-gap: 10px;      -moz-column-count: 4;      -moz-column-gap: 10px;      -webkit-column-count: 4;      -webkit-column-gap: 10px;  }

<div class="column">      <div class="inner">1</div>      <div class="inner">2</div>      <div class="inner">3</div>      <div class="inner">4</div>      <div class="inner">5</div>      <div class="inner">6</div>      <div class="inner">7</div>      <div class="inner">8</div>      <div class="inner">9</div>      <div class="inner">10</div>      <div class="inner">11</div>      <div class="inner">12</div>  </div>

The result is:
1 4 7 10
2 5 8 11
3 6 9 12

What I want is:
1 2 3 4
5 6 7 8
9 10 11 12

Is that possible? How should I make it?

Answer 1

Is even easier:

.inner:nth-child(4n+1) {      clear: left;  }    .inner {      float: left;      margin: 5px;  }

<div class="column">      <div class="inner">1</div>      <div class="inner">2</div>      <div class="inner">3</div>      <div class="inner">4</div>      <div class="inner">5</div>      <div class="inner">6</div>      <div class="inner">7</div>      <div class="inner">8</div>      <div class="inner">9</div>      <div class="inner">10</div>      <div class="inner">11</div>      <div class="inner">12</div>  </div>

You can apply float: left and clear float: left every 4n+1 elements.

Ref:

:nth-child

Answer 2

I actually put some effort forward this time. ignore everything from previous edit

the display property's inline-blocks is probably what you want to use.

Here is a thorough guide on how to use it

And here's a brief demo

li {     width: 200px;     display: inline-block; }