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

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/