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

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


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

タブレットサイズ(768px以上)では4カラム、ウインドウサイズを縮めるとスマホサイズ(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カラムを設定した例

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


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