Bulma: Way to configure stack orders

[Shigeki1120]

Is there any way to define stack orders on mobile?

For example, take a look at this

https://jsbin.com/cipayeqepi/edit?html,output

It's horizontal on wide screens, when it shrinks "1" is on top.

How can I define an order to make "2" on top in this case.

I also tried to use order
https://jsbin.com/yewifavoyo/edit?html,css,output

[yo7]

I think you can archive what you want using flex-direction: row-reverse.
It's the opposite of changing the order on mobile. But it's more intuitive.

Make "2" on top from the begining, and make them reverse in horizontal on wide screens.

<div class="columns reverse-row-order">
  <div class="column box">
    2
  </div>
  <div class="column box">  
    1
  </div>
</div>

.reverse-row-order {
  flex-direction: row-reverse;
}

https://jsbin.com/fahoqomika/edit?html,css,output

[Shigeki1120]

Thanks for the demo.I appreciate that.

But, I was wondering if I can achieve the same result without changing a html structure

[yo7]

Ah, OK. That would be something like this?
You could write it cleaner using mixins though.

<div class="columns reverse-row-order">
  <div class="column box">
    1
  </div>
  <div class="column box">  
    2
  </div>
</div>

@media screen and (max-width: 769px) {
  .reverse-column-order {
    display: flex;
    flex-direction: column-reverse;
  }
}

https://jsbin.com/xovivuyome/edit?html,css,output

[Shigeki1120]

That's perfect. Thanks alot.

Just out of curiosity, what if you have elements like this
~~~

1

2

3

4

~~~

and you want to order them like this on mobile

~~~

3

2

1

4

~~~
How would you do it?

[yo7]

Like this?

https://jsbin.com/dukihociyu/1/edit?html,css,output

And can you close the issue if you solved your question.

[a-vilmin]

FYI there's some major typos on this. Final code should be:

<div class="columns reverse-row-order">
  <div class="column box">
    2
  </div>
  <div class="column box">  
    1
  </div>
</div>

@media only screen and (min-width: 769px) {
  .reverse-row-order {
    display: flex;
    flex-direction: row-reverse;
  }
}

Just some inconsistent use of "row" and "column", as well as forgetting to reorder the columns in the markup. Works great tho!