css - Bulma:更改列的堆叠顺序

Question

如何在移动设备或平板电脑上更改列的堆叠顺序？

例如，下面的代码在宽屏幕上水平显示元素，但当它缩小时我希望 2 位于顶部。我不想更改 html 结构来执行此操作。

例子如下:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>

Answer 1

As of the current bulma version v0.3.1, there is no feature for the changing the order of columns.

但是，您可以定义自定义样式来更改移动设备、平板电脑或您想要的任何分辨率的顺序。

例如，您可以定义一个自定义类 .reverse-columns 并将其添加到具有以下样式的父级上:

@media(max-width: 767px) { /* <== You can change this break point as per your  needs */
  .reverse-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

@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>