Bulma：如何在移动设备上定义堆栈顺序 [英] Bulma: How can I define the stack order on mobile devices

问题描述

我使用 Bulma flexbox css框架进行旋转 - 到目前为止它的漂亮！我找到的唯一障碍是我似乎无法设置移动设备的显示顺序。

I am taking the Bulma flexbox css framework for a spin - so far its pretty neat! The only stumbling block I've found is that I can't seem to set the display order for mobile devices.

<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看起来像：

Here is what my css looks like:

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 显示在最左侧。

For this answer, I'm assuming you want BAR to display first ONLY on mobile screens. And for larger display screens you want FOO to be displayed to the left-most side.

这是利用 flexbox 这是什么bulma是建立的。在较大的屏幕上，bulma为列提供属性 display：flex ，可用于显示行和列中的内容。

One way to do this is to take advantage of flexbox which is what bulma is built off of. On larger screens, bulma gives columns the property display:flex which can be used to display contents in rows and columns.

但是在较小的屏幕上，display属性切换到 block 。在大多数情况下，当连续项目 display：block 时，它们将按顺序堆叠。

However on smaller screens the display property switches to block. In most cases, when consecutive items have display:block, they're going to stack in order.

可以使用一个有趣的解决方法。在您的HTML中首先放置 BAR 。然后向列添加一个类，并按如下样式设置：
HTML：

We can make use of this using a funky workaround. Place BAR first in your html. Then add a class to columns and style it like so: 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/

And here is a jsFiddle if you want to see it working: https://jsfiddle.net/99ydhod8/

这篇关于Bulma：如何在移动设备上定义堆栈顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！