如何在两列div中水平排序块？

Question

我正在自定义Wordpress主题，在主页上以两列而不是一列显示新文章。我可能没有正确使用column-count属性，我猜应该用它来分割文本，而不是排列块布局。

    .content{
        column-count:2;
    }

    .article{
      display: inline-block;
     } 

每个文章缩略图在主<div class="article">内都有自己的<div class="content">，目前按垂直顺序显示。新文章作为第一个div动态添加（article n始终是最后发布的）。如何在主“content”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，sidebar）的解决方案，并坚持当前的两列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。检查附带的代码段：

＆＃13;

＆＃13;

.content{
    width: 100%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;