3

我正在尝试使用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; }
}
4

2 回答 2

5

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

做到这一点的一种方法是利用flexboxbulma 的基础。在较大的屏幕上，bulma 为列提供了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/

于 2017-01-09T03:05:26.273 回答
1

Assume Your HTMl is like :

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

If you want to reverse the order using media query , you can do something like this:

.reverseMe{
    @include until($tablet) {
        flex-direction: row-reverse;
        display: flex;
    }
}
于 2020-09-12T11:02:15.997 回答