By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:
--- title: Columns responsiveness layout: documentation doc-tab: columns doc-subtab: responsiveness breadcrumb: - home - documentation - columns - columns-responsiveness --- {% capture columns_mobile %}
is-three-quarters-mobileis-two-thirds-tabletis-half-desktopis-one-third-widescreenis-one-quarter-fullhd
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:
1
2
3
4
If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container:
1
2
3
4
You can define a column size for each viewport size: mobile, tablet, and desktop.
is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd
2
3
4
5