Bulma: Make left column appear under a right column on tablet/mobile devices

[josefzacek]

Make left column appear under a right column on tablet/mobile device

Link below shows bootstrap example but I unfortunately could not implement anything like that with bulma

http://stackoverflow.com/questions/19569541/making-a-left-sidebar-appear-under-a-right-hand-column-on-a-mobile-with-bootstra

[dyusha]

Hey @josefzacek,

I guess flex-direction: column-reverse in a media query on a container should do this trick for you.

[josefzacek]

Hi @dyusha

I was hoping there is a built-in class that could do it for me. Thank you for suggestion anyway

[LionelRieder]

I'm very curious why Bulma doesn't have a built-in class for that ? There is a specific reason behind that choice ?

[jgthms]

It's too opinionated. And it's a single line of CSS for those who need it.

[stoqe]

I'm new to Bulma and I'm loving it so far. However coming from Tachyons I'm certainly left wanting more; especially more built-in classes.

Providing an optional built-in class is not opinionated at all: not providing an optional built-in class is totally opinionated.

[jvarness]

After my bulma import in my sass, I was able to put this code into my codebase to force reversed column order when I needed it:

.columns.is-reversed-mobile
  +mobile
    display: flex
    flex-direction: column-reverse

Then, for groups of columns that I wanted to have a reversed order, I just added the is-reversed-mobile class to my columns element.