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

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


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

タブレットサイズ以上(641px以上)では4カラム、スマホサイズ(640px以下)では2カラムになります。


.medium-3 .small-6
.medium-3 .small-6
.medium-3 .small-6
.medium-3 .small-6

PCでは3カラム、タブレットサイズ以下では2カラムを設定した例

PCサイズ以上(1025px以上)では3カラムで表示され、タブレットサイズ(1024px〜641px)では2カラムになる設定です。スマホサイズ(640px以下)になると1カラムになります。


.large-4 .medium-6
.large-4 .medium-6
.large-4 .medium-6

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

PCサイズ以上(1025px以上)では3カラムで表示されます。スマホサイズからタブレットサイズの範囲では(〜1024px)ではでは2カラムになります。
これは、モバイルファーストの考えからか小さなサイズで指定されたものが大きなサイズで指定しない限りはその設定を引き継ぐ形になるためタブレットサイズでも2カラムになります。


.large-4 .small-6
.large-4 .small-6
.large-4 .small-6