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

Question

我正在试用Bulma flexbox 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; }
}

Answer 1

对于这个答案，我假设您希望 BAR 仅首先显示在移动屏幕上。对于较大的显示屏幕，您希望FOO显示在最左侧。

做到这一点的一种方法是利用flexboxbulma 的构建基础。在较大的屏幕上，bulma 赋予 columns 属性display:flex，可用于按行和列显示内容。

但是，在较小的屏幕上，显示属性会切换为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/