Bulma：如何在移动设备上定义堆栈顺序

Question

我正在试用Bulma弹性盒子CSS框架，目前看起来相当不错！唯一的难点是我似乎无法为移动设备设置显示顺序。

<div class="columns">
    <div class="column foo">Foo</div>
    <div class="column bar">Bar</div>  // Would like this to be first on small deviecs
</div>

编辑

这是我的CSS代码：

body, html {
    background-color: blue;
}

.foo { order: 2; }
.bar { order: 1; }


@media only screen and (min-width: 769px) {
    body, html {
        background-color: red;
    }

    .foo { order: 1; }
    .bar { order: 2; }
}

- Damon

---

你尝试过给该元素添加 order: -1 属性吗？ - Michael Benjamin

谢谢Michael！刚试了一下，没有成功。看起来问题出在我还没弄清楚最小的尺寸/断点。其他尺寸都可以调整顺序。我已经更新了我的问题以作澄清。 - Damon

我无法重现这个问题。如果您能够发布一个实时演示（例如，jsfiddle.net或codepen.io），那可能会有所帮助。 - Michael Benjamin

Answer 1

对于这个问题，我假设您希望在移动屏幕上首先显示BAR。对于更大的显示屏幕，您希望FOO显示在最左边。

一种方法是利用flexbox，这也是Bulma所建立的基础。在较大的屏幕上，Bulma为列提供了display: flex属性，可用于以行和列显示内容。

但在较小的屏幕上，显示属性将切换为display: block。在大多数情况下，当连续的项目具有display:block时，它们会按顺序堆叠。

我们可以利用这个别致的解决方案。将BAR放置在html中的第一位。然后向columns添加一个类，并进行如下样式设置：

HTML:

<div class="columns reverse-row-order">
  <div class="column bar">Bar</div>
  <div class="column foo">Foo</div>
</div>

CSS：

.reverse-row-order{
 flex-direction:row-reverse;
}

如果您想查看它的工作原理，这里有一个 jsFiddle 链接：https://jsfiddle.net/99ydhod8/

- Angela

Answer 2

Assume Your HTMl is like :

<div class="columns reverseMe">
<div class="column">First Content</div>
<div class="column">Second Content</div>
</div>

如果您想使用媒体查询来反转顺序，可以像这样操作：

.reverseMe{
    @include until($tablet) {
        flex-direction: row-reverse;
        display: flex;
    }
}

- Don k Asok

---

这是在使用Bulma和SASS时足够的，+1。唯一需要注意的是Bulma喜欢约定is-X，所以也许可以用is-mobile-reversed？ - Lachee

Answer 3

自Bulma 0.9.1版本以来

is-flex-direction-row-reverse类

<div class="columns is-flex-direction-row-reverse">
    <div class="column foo">Foo</div>
    <div class="column bar">Bar</div>
</div>

来源

- Erdal G.