Fixed number of columns, ordered top-bottom left-right

Question

I want (if possible) to make a css trick to create 3 columns, ascending order, from top to bottom and left to right. I would rather show with examples what I want to achieve:

For

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

I would like to see this order:

1 4 6
2 5 7
3

For

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

I would like to see this order:

1 3 5
2 4 6

For

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

I would like to see:

1 3 5
2 4

For

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

I would like to see:

1 3 4
2 

For

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

I would like to see:

1 2 3

For

<div class="container">
    <div>1</div>
    <div>2</div>
</div>

I would like to see:

1 2 

And so on. I was thinking to use flex columns but could make to match the pattern above. So I used Javascript to order the columns and achieve the desired effect. But some folks claim it could be achieved as well using CSS `flexbox.