column-countを使用すると、解像度が小さければ3から2列に動的に変更できますか？

Question

私はcolumn-countプロパティを使用して、3つの列に複数のdivがあるページを設定しています。これは大きな画面で大きく見えます。各divの固定幅は、たとえば500ピクセル（画像が含まれています）です。

しかし、小さな画面で作業する場合、ブラウザーは2つの列に移動するときに元の\ 3列内にコンテンツを強制しようとします。コンテンツが重複し始めるときに、コンテンツを2つの列に移動させるのが最善の方法がありますか？

Answer 1

column-countではなくcolumn-widthプロパティを使用すると、ブラウザは自動的に空き領域を埋めるために必要な数の列数を調整します。

http://codepen.io/cimmanon/pen/CcGlE

.foo { 
    columns: 500px; // shorthand, prefixes may be necessary 
} 

Answer 2

@media (max-width: 500px) { 
    .your element selector here { 
-webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count:   2; 

    } 
}