如何在两列div中水平地对块进行排序？

Question

我正在定制一个Wordpress主题，在主页上以两列而不是一列的形式显示新的文章。我可能没有正确地使用column-count属性，我认为应该使用它来拆分文本，而不是安排块布局。

    .content{
        column-count:2;
    }

    .article{
      display: inline-block;
     } 

每一篇文章的缩略图都有自己的<div class="article">，在主<div class="content">中，当前按垂直顺序显示。新文章作为第一个div动态添加(article n总是最后发布的)。如何在主“内容”div中水平地对文章进行排序，而不是垂直排序：

当前布局：

#column 1        #column2

Article n        Article n-4      
Article n-1      Article n-5   
Article n-2      Article n-6    
Article n-3      Article n-7  

预期布局：

#column 1        #column2

Article n        Article n-1     
Article n-2      Article n-3   
Article n-4      Article n-5    
Article n-6      Article n-7 

我希望避免任何涉及创建“三列body布局”(content1、content2、侧栏)的解决方案，并坚持使用当前的两列body (content )，在content中有两列。

我希望有一个纯css/html解决方案。

编辑：辛兰迪普·辛格的答案是可以接受的，但每当有不同大小的块时，答案就会变得凌乱：

​

.content{
    width: 80%;
}

.article{
    margin:10px;
    float: left;
    width: 39%;
    background-color:green;
} 

.regular{
    height:100px;
}

.big {
    height:120px;
}

.small{
    height:50px;
}

<div class="content">
    <div class="article big">
        n
    </div>
    <div class="article regular">
        n-1
    </div>
    <div class="article big">
        n-2
    </div>
    <div class="article small">
        n-3
    </div>
    <div class="article big">
        n-4
    </div>
    <div class="article regular">
        n-5
    </div>
    <div class="article small">
        n-6
    </div>
</div>

​

Answer 1

列计数总是像当前布局一样对其排序。如果要实现预期的布局，则必须使用float:left。检查附加的代码段：

​

.content{
    width: 100%;
}

.article{
    float: left;
    width: 50%;
} 

<div class="content">
    <div class="article">
        n
    </div>
    <div class="article">
        n-1
    </div>
    <div class="article">
        n-2
    </div>
    <div class="article">
        n-3
    </div>
    <div class="article">
        n-4
    </div>
    <div class="article">
        n-5
    </div>
    <div class="article">
        n-6
    </div>
</div>

​