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; }
}
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 propertydisplay: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 havedisplay: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 tocolumns
and style it like so: HTML:CSS:
And here is a
jsFiddle
if you want to see it working: https://jsfiddle.net/99ydhod8/