Bulma: Responsive CSS grid helpers for column row reversal

[tony]

I want a sidebar (a table of contents) to show on the right side with Desktop, but want the sidebar (ToC) to be on the top when on mobile. The default behavior of bulma will push the right column to the bottom on mobile. It may be worth adding helper classes to adjust flex-direction responsively.

Prior issues: https://github.com/jgthms/bulma/issues/475

Solutions: https://github.com/jgthms/bulma/issues/475#issuecomment-273398154, https://stackoverflow.com/a/41174141

Similar behavior in other flex implementations: https://v4-alpha.getbootstrap.com/utilities/flexbox/#direction

[tony]

Here is how I'm doing it right now, hardcoded an .is-reverse-mobile class:

.columns.is-reverse-mobile {
  @include mobile {
    flex-direction: column-reverse;
    display: flex;  // .is-mobile gives this too
    .column {
      // we want width to be 100%, this gives us the power of flex's ordering.
      // ux behavior is same as before, except underneath the hood width fills
      // 100% of the column instead of dropping flex in mobile
      width: 100%; 
    }
  }
}

In action: https://devel.tech/tips/n/sNZwQvNh/django-compressor-vs-django-webpack-loader/

[kennedybaird]

+1 to this, would be fantastic!

[roni-estein]

for more discrete control, is-pulled-1..12 is-pushed-1..12 with the breakpoints would be helpful too!

[philippeluickx]

Bulma is mobile-first. Would it make more sense to design this from the other perspective (e.g. is-reverse-tablet)?
Also, we can get some inspiration from https://getbootstrap.com/docs/4.0/layout/grid/#order-classes ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[augnustin]

It's been automatically closed, but not implemented, has it?

This simply implies adding a helper function, shouldn't be such great deal, should it?

Here's my code:

$breakpoints: (
  tablet: $tablet,
  desktop: $desktop,
  widescreen: $widescreen,
  fullhd: $fullhd
);

.columns {
  @each $name, $value in $breakpoints {
    &.is-reverse-#{$name} {
      @include from($value) {
        flex-direction: row-reverse;
      }
    }
  }
}