Bulma：更改列的堆叠顺序

Question

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

例如，下面的代码在宽屏幕上水平显示元素，但当它收缩时，我想让2位于顶部。我不想更改html结构来实现这一点。

The example is below:

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

- shigg

---

你尝试过这个吗？ - Obsidian Age

谢谢提供链接，但我不想改变HTML结构来实现它。 - shigg

Answer 1

截至当前 bulma 版本 v0.3.1，没有更改列顺序的特性。

然而，您可以定义自定义样式来更改移动、平板或任何分辨率下的顺序。

例如，您可以定义一个定制类 .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>

- Mohammad Usman

---

如果您正在使用Sass，还有一个方便的变量可以用于访问断点宽度，称为$tablet。在initial-variables.sass中可以找到此变量和其他响应性变量。 - Tom Mulkins

这是正确的想法，但当我使用"column-reverse"时它没有起作用。相反，我发现"row-reverse"可以起作用。在这里学到了这个方法：https://github.com/jgthms/bulma/issues/475 - JessycaFrederick

非常好的答案。 - dylzee

Answer 2

@media(max-width: $desktop) {
  .columns.is-reversed-touch {
    flex-direction: column-reverse;
    display: flex;
  }
}

@media(max-width: $tablet) {
  .columns.is-reversed-mobile {
    flex-direction: column-reverse;
    display: flex;
  }
}

您可以随时添加更多的规则来适应宽屏等情况，但这通常就是您所需要的。

flex-direction: row-reverse;是我会用于.columns.is-mobile.is-reversed-mobile的。因此，您也可以添加该规则。

- Joe Eifert