如何在768点打破单个列布局后修复bulma css，它应该是平板设备的2列布局？

Question

我正在尝试使用bulma css进行布局，并且在768处打破后进行1列布局，这是平板电脑模式，此时它应该是4列布局，这不是这里的情况。那么我如何将列布局分为3列布局，然后是2列布局，然后是移动的列布局。

我尝试了一些谷歌搜索，甚至堆栈溢出，但我无法解决问题。我也试过在列的顶部给出部分，但没有奏效。

这是bulma css网站的基本列代码，它不是我想要的。

First column Second column Third column Fourth column

我从4列布局到1列布局，它应该是4列布局，然后是3列布局，然后是2列，然后是1列布局。编辑：我想让它与wordpress一起使用，但如果我无法解决这个问题我就不能。

Answer 1

我已经创建了解决方案，这个代码对我来说很好，因为我希望它能够工作。

<div class="columns is-multiline  is-variable is-4">

    <div class="column is-4">
<div class=" ">

    <div class="card-image">
        <figure class="image is-4by3">
            <img src="myImage" alt="Placeholder image">
        </figure>
    </div>

    <p class="subtitle is-3 card-content has-text-centered">Subtitle 3</p>
    <p class="card-footer-item">hyee</p>
</div>
        <hr >
    </div>

</div>

而且我已经使它在wordpress中工作，只需将相同的结构放在相同的顺序但是按字的方式