Bulma: Change stack order of columns

Question

How can I change the stack order of columns on mobile or tablet?

For example, the code below shows elements horizontally on wide screens, but when it's shrinked I want 2 to be on top. I don't want to change the html structure to do it.

The example is below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>

Have you tried [this](http://stackoverflow.com/a/41540439/2341603)? — Obsidian Age, Jan 18 '17 at 01:46
Thanks for the link but,I don't want to change a html structure to do it. — shigg, Jan 18 '17 at 01:48

score 38 · Accepted Answer · edited Oct 30 '19 at 01:12

38

As of the current bulma version v0.3.1, there is no feature for the changing the order of columns.

However, you can define custom styles to change the order for mobile, tablet or whatever resolution that you want.

You can define a custom class .reverse-columns for example and add it on parent with following styles:

@media(max-width: 767px) { /* <== You can change this break point as per your  needs */
  .reverse-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");

@media(max-width: 767px) {
  .custom-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

<div class="columns custom-columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>

edited Oct 30 '19 at 01:12

Nathaniel Flick

2,902
2
22
31

answered Jan 26 '17 at 09:02

Mohammad Usman

37,952
20
92
95

4

There's also a handy variable if using Sass you can access called `$tablet` for breakpoint widths. This variable and other ones for responsiveness can be found in `initial-variables.sass`. – Tom Mulkins Apr 03 '19 at 21:32
3

This is the right idea, but when I used "column-reverse" it didn't work. I found "row-reverse" works instead. Learned this here: https://github.com/jgthms/bulma/issues/475 – JessycaFrederick Feb 10 '20 at 18:16
1

very nice answer – dylzee Dec 21 '20 at 16:30

score 1 · Answer 2 · answered Aug 21 '20 at 09:11

@media(max-width: $desktop) {
  .columns.is-reversed-touch {
    flex-direction: column-reverse;
    display: flex;
  }
}

@media(max-width: $tablet) {
  .columns.is-reversed-mobile {
    flex-direction: column-reverse;
    display: flex;
  }
}

You can always add more rules for widescreen etc., but this is what you usually need.

flex-direction: row-reverse; is what I would use for .columns.is-mobile.is-reversed-mobile. So you can add that rule too.

Bulma: Change stack order of columns

2 Answers2