砌体2列框使用css float和clear

Question

在你提出问题之前，我想制作一个像谷歌加帖子一样的2列div：
1.cant使用masonry.js因为它的绝对定位和div expandablity
2.使用css列并且工作正常，但顺序是问题 我想要：
1 2
3 4
5 6
但是css栏给了我 1 4
2 5
3 6

我已经设法用浮动和清晰的工作做得很棒，但有一些差距，我删除它 这是我用过的css：

.masonry .item:nth-child(odd) {
    background-color: #f00;
    clear: right;
    float: right;
}
.masonry .item:nth-child(even) {
    background-color: #0020cc;
    clear: left;
    float: left;
}  

这是结果：http://imgur.com/mdwkbKU
谁能帮我这个 ？我必须做任何其他选择吗？ 使用bootstrap 3.3.5