直接私はスクリーンはLGやMDの場合は、次のように互いの下の列を整列する互いに

Question

下の列を作る：（これは容易なことで、私が知っているだろう...本当の問題を待ち：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