Bulma - Flex-Column-Order for SCSS

_flex-order.scss

/*
<div class="columns is-flex is-multiline">
  <div class="column is-full is-half-desktop is-order-2 is-order-1-desktop">Mobile 2 | Desktop 1</div>
  <div class="column is-full is-half-desktop is-order-1 is-order-2-desktop">Mobile 1 | Desktop 2</div>
</div>
*/

@for $n from 1 through 12 {
  .is-order-#{$n} {
    order: #{$n} !important;
  }

  @include mobile {
    .is-order-#{$n}-mobile {
      order: #{$n} !important;
    }
  }
  
  @include tablet {
    .is-order-#{$n}-tablet {
      order: #{$n} !important;
    }
  }

  @include tablet-only {
    .is-order-#{$n}-tablet-only {
      order: #{$n} !important;
    }
  }
  
  @include touch {
    .is-order-#{$n}-touch {
      order: #{$n} !important;
    }
  }
  
  @include desktop {
    .is-order-#{$n}-desktop {
      order: #{$n} !important;
    }
  }

  @include desktop-only {
    .is-order-#{$n}-desktop-only {
      order: #{$n} !important;
    }
  }
  
  @include widescreen {
    .is-order-#{$n}-widescreen {
      order: #{$n} !important;
    }
  }
  
  @include widescreen-only {
    .is-order-#{$n}-widescreen-only {
      order: #{$n} !important;
    }
  }
  
  @include fullhd {
    .is-order-#{$n}-fullhd {
      order: #{$n} !important;
    }
  }
}