Bulma: How can I define the stack order on mobile devices

Question

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

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

Prohibitionist

You've tried giving that element order: -1? – Michelle

Thank you Michael! Just gave that a try - no luck. It seems like it's the smallest size/breakpoint that I haven't figured out. I can shift the order in all of the other sizes. I've updated my question to clarify. – Prohibitionist

I can't reproduce the problem. If you can post a live demo (e.g., jsfiddle.net or codepen.io) that may help. – Michelle

Answer 1

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.

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.

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.

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

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

Eames

Answer 2

Since Bulma 0.9.1

👉 is-flex-direction-row-reverse class

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

Source

Dichy

Answer 3

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

Lifer

This is an adequate when using Bulma with SASS, +1 Only thing to note is that bulma likes the convention is-X, so maybe is-mobile-reversed? – Outwork