<div class="columns is-mobile">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div><div class="columns is-mobile">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
Par défaut les colonnes ne sont activée que sur tablette et ordinateur. Elles sont donc empillées les unes sur les autres sur smatphone.
Pour que les colonnes fonctionnent sur smartphone, il faut ajouter la classe 'is-mobile' sur le container 'columns'.
Pour n'avoir les colonnes que sur ordinateur, il faut ajouter la classe 'is-desktop' sur le container 'columns'.
|
Mobile
Jusqu'a 768px
|
Tablet
Entre 769px
et
1023px
|
Desktop
Entre 1024px
et
1215px
|
Widescreen
Entre 1216px
et
1407px
|
FullHD
à partir de 1408px
|
|
|---|---|---|---|---|---|
|
mobile |
- |
||||
|
- |
tablet |
||||
|
- |
Desktop |
||||
|
- |
Widescreen |
||||
|
- |
fullhd |
||||
|
- |
tablet-only |
- |
|||
|
- |
desktop-only |
- |
|||
|
- |
widescreen-only |
- |
|||
|
touch |
- |
||||
|
until-widescreen |
- |
||||
|
until-fullhd |
- |
||||