使列直接在彼此之下

Question

当屏幕是lg或md时，我想像这样将列对齐:(这很容易，我知道..等待真正的问题：P）

但是，当我进入sm屏幕时，我希望它们是这样的。

我试过像这样创建一堆松散的列：

<div class="col-md-4 col-sm-6 col-xs-12">
    ...
</div>

但这看起来像这样：

我已经考虑了一段时间，但却无法弄明白......

有一种简单的方法吗？

Answer 1

使用CSS 3列和媒体查询来控制跨越的列数。

.row>.col-md-4 {
    display: inline-block;
    width: 100%;
    float: none;
}

.row {
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
}

@media (min-width: 768px) {
    .row {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 767px) {
    .row {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

演示：http://www.codeply.com/go/S9NFO9MpF5