複数のデバイスでカラム表示を切り替え

デバイス毎に表示を切り替える設定をしています。正確にはウインドウサイズでの切替になります。
PCでウインドウサイズを変更しながら確認してみてください。


タブレットサイズ以上では4カラム、スマホサイズ以下では2カラムを設定した例

ウインドウサイズを縮めると(767px以下)2カラムになります。


.col-sm-3 .col-xs-6
.col-sm-3 .col-xs-6
.col-sm-3 .col-xs-6
.col-sm-3 .col-xs-6

PCでは3カラム、スマホサイズ以下では2カラムを設定した例

ウインドウサイズ992px以上では3カラムで表示され、ウインドウサイズ767px以下では2カラムになる設定です。上記とは違いカラム落ちする設定にしています。


.col-md-4 .col-xs-6
.col-md-4 .col-xs-6
.col-md-4 .col-xs-6