Булма сетки - 2x2 на мобильном телефоне, 1x4 на планшете и выше

Question

Как сделать сетку размером 1x4 на планшете и выше, но 2x2 на мобильном?

<div class="columns is-mobile" data-v-15d98976="">
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
</div>

Однако она не будет работать на мобильном устройстве. Два последних столбца просто скрыты.

Answer 1

Добавьте is-multiline к контейнеру столбцов, например:

<div class="columns is-mobile is-multiline" data-v-15d98976="">
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
    <div class="column is-6-mobile is-3-tablet" data-v-15d98976=""></div>
</div>