ブレイクポイントごとの表示設定

ブレイクポイントごとに表示・非表示を設定した例。分かりやすいように設定したカラムの背景色を変更しています。
表示・非表示の状態を確認できます。


.show-for-small-only設定例

スマホサイズ(640px)以下にウインドウサイズを変更すると表示されます。


.small-6 .show-for-small-only
.small-7

.show-for-medium-only設定例

タブレットサイズ(641px〜1024px)でのみ表示されます。


.small-5 .show-for-medium-only
.small-6

.show-for-medium-up設定例

タブレットサイズ(641px〜)以上でのみ表示されます。


.small-6 .show-for-medium-up
.small-7

.hide-for-medium-only設定例

タブレットサイズ(641px〜1024px)でのみ非表示になります。


.small-6 .hide-for-medium-only
.small-7

.hide-for-large-up設定例

PCサイズ(1024px〜)以上では非表示になります。


.small-6 .hide-for-large-up
.small-7