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

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>

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