Bulma：更改列的堆叠顺序答案

【问题标题】：Bulma: Change stack order of columnsBulma：更改列的堆叠顺序
【发布时间】：2017-01-18 01:30:13
【问题描述】：

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

例如，下面的代码在宽屏幕上水平显示元素，但是当它缩小时，我希望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>

【问题讨论】：

你试过this吗？
感谢您的链接，但我不想更改 html 结构。

标签： css bulma

【解决方案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>

【讨论】：

还有一个方便的变量，如果使用 Sass，您可以访问名为 $tablet 的断点宽度。此变量和其他用于响应的变量可以在 initial-variables.sass 中找到。
这是正确的想法，但是当我使用“column-reverse”时它不起作用。我发现“行反向”可以代替。在这里学到了这个：github.com/jgthms/bulma/issues/475
非常好的答案

【解决方案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 的内容。因此，您也可以添加该规则。

【讨论】：