固定的列数，从上到下从左到右排序

Question

我想（如果可能）制作一个CSS技巧来创建3列， 升序，从上到下，从左到右。我希望通过示例展示我想要实现的目标：

  

对于

<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>

我希望看到此订单：

1 4 6
2 5 7
3

  

对于

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

我希望看到此订单：

1 3 5
2 4 6

  

对于

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

我想看看：

1 3 5
2 4

  

对于

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

我想看看：

1 3 4
2 

  

对于

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

我想看看：

1 2 3

  

对于

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

我想看看：

1 2 

以此类推。我当时在考虑使用flex列，但可以使其与上述模式匹配。 因此，我使用Javascript对列进行排序并达到了预期的效果。但是有些人声称使用CSS`flexbox也可以实现。