html - 从 bool 玛末端开始包裹

Question

我使用 Bulma (0.7.1) 有两列具有以下结构:

<section class="section">
  <div class="columns">
    <div class="column">
        <!-- column 1 -->
    </div>
    <div class="column">
        <!-- column 2 -->
    </div>
  </div>
</section>

当用户使用平板电脑或手机访问我的网站时，我希望我的第二列首先换行，即在第一列上方。

Bulma 中有内置类可以做到这一点吗？或者我必须编写自己的 CSS 吗？如果是这样，怎么办？

Answer 1

好吧，我用 CSS/Bulma 解决了这个问题，您可以添加 custom-columns 并使用 column-reverse 来更改列的顺序。

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");

@media(max-width: 767px) {
  .custom-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

<div class="columns custom-columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>