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

我正在采取Bulma Flexbox CSS 框架 http://bulma.io/试一试 - 到目前为止它非常整洁！我发现的唯一障碍是我似乎无法设置移动设备的显示顺序。

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

EDIT

这是我的 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; }
}

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

做到这一点的一种方法是利用flexbox这就是布尔玛的基础。在较大的屏幕上，布尔玛赋予列属性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/ https://jsfiddle.net/99ydhod8/