Css 引导列与列中的上一项对齐

我试图解决这个问题已有一段时间了，所以我需要你的帮助。。 我有一个2列的模板（带引导网格系统），如下所示：

我想要这样的东西：

我的html目前看起来是这样的：

<div class="container-fluid">
    <div class="row">
        <div class="post-container column-md-6" id="post-1">
            content...
        </div>
        <div class="post-container column-md-6" id="post-2">
            content...
        </div>
    </div>
    <div class="row">
        <div class="post-container column-md-6" id="post-3">
            content...
        </div>
        <div class="post-container column-md-6" id="post-14">
            content...
        </div>
    </div>
   [...]
</div>

内容。。。
内容。。。
内容。。。
内容。。。
[...]

---

你知道我怎么做吗？（不破坏页面中的发布顺序，因为它们只是纵向的一列）

没有可玩的JSFIDLE，作为猜测，可以尝试删除

.row

元素，如下所示：

<div class="container-fluid">
    <div class="post-container column-md-6" id="post-1">
        content...
    </div>
    <div class="post-container column-md-6" id="post-2">
        content...
    </div>
    <div class="post-container column-md-6" id="post-3">
        content...
    </div>
    <div class="post-container column-md-6" id="post-14">
        content...
    </div>
    [...]
</div>

内容。。。
内容。。。
内容。。。
内容。。。
[...]

如果这不起作用（我的方法），那么我建议使用砌体：

---

下面是一组使用Masonary的示例：

只有使用html才能做到这一点，您需要添加一些JS，为此有许多好的插件（一个示例：）

另一个选项（如果您不需要IE支持-10%的用户）：

CSS3.mn。简单清洁：

查看此小提琴>或www.w3schools.com“css3\u多栏”或

HTML

<div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

---

一个JSFIDLE会很好，谢谢你的提示：）我会尝试两种解决方案（Mattos和你的），我不需要特别的IE支持，所以也许css解决方案对我来说是最好的；）谢谢，我将尝试CSS3专栏，看起来不错；）

div {
    width:500px;
    padding:10px;
    background:#ccc;

    /* Number of COLS */
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;

    /* Distance between COLS */
    -moz-column-gap:10px; /* Firefox */
    -webkit-column-gap:10px; /* Safari and Chrome */
    column-gap:10px;
}

.item1 {
    background:#f00;
    height:100px;
    padding: 3px;
    margin:10px;
    display:inline-block;
}
.item2 {
    background:#0f0;
    height:150px;
    padding: 3px;
    margin:10px;
    display:inline-block;
}
.item3 {
    background:#00f;
    height:100px;
    padding: 3px;
    margin:10px;
    display:inline-block;
}