デフォルトでは、カラムは**タブレット**以降で有効になります。つまり、カラムは**モバイル**では縦に積み重ねられます。
カラムを**モバイルでも**機能させたい場合は、`columns`コンテナに`is-mobile`修飾子を追加するだけです
スポンサー
カラムのレスポンシブ性
各**ブレークポイント**に対して**異なる**カラムレイアウトを処理する
モバイルカラム #
1
2
3
4
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>カラムを**デスクトップ**以降_のみ_で使用する場合は、`columns`コンテナに`is-desktop`修飾子を使用するだけです
1
2
3
4
<div class="columns is-desktop">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>ブレークポイントごとの異なるカラムサイズ #
モバイル、タブレット、デスクトップの_各_ビューポートサイズに**カラムサイズ**を定義できます。
モバイルで3/4幅
タブレットで2/3幅
デスクトップで1/2幅
ワイドスクリーンで1/3幅
フルHDで1/4幅
2
3
4
5
<div class="columns is-mobile">
<div
class="
column
is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd
"
>
<code>is-three-quarters-mobile</code><br />
<code>is-two-thirds-tablet</code><br />
<code>is-half-desktop</code><br />
<code>is-one-third-widescreen</code><br />
<code>is-one-quarter-fullhd</code>
</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>