如何在两列 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.

我会很感激一个纯粹的css/html 解决方案。

编辑：Simrandeep Singh 的答案是可以接受的，但只要有不同大小的块，它就会变得混乱：

.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。检查附上的代码sn-p：

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