Skip to content

Instantly share code, notes, and snippets.

@vanderb

vanderb/_flex-order.scss

Last active August 26, 2019 15:06
Show Gist options
  • Save vanderb/36dfc7bee070a36b7e710c47090ba974 to your computer and use it in GitHub Desktop.
Save vanderb/36dfc7bee070a36b7e710c47090ba974 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vanderb revised this gist Aug 26, 2019. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions _flex-order.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    /*
    <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;
  2. vanderb revised this gist Aug 26, 2019. No changes.
  3. vanderb revised this gist Aug 26, 2019. 1 changed file with 16 additions and 34 deletions.
    50 changes: 16 additions & 34 deletions _flex-order.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -2,76 +2,58 @@
    .is-order-#{$n} {
    order: #{$n} !important;
    }
    }

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

    @include tablet {
    @for $n from 1 through 12 {

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

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

    @include touch {
    @for $n from 1 through 12 {

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

    @include desktop {
    @for $n from 1 through 12 {

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

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

    @include widescreen {
    @for $n from 1 through 12 {

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

    @include widescreen-only {
    @for $n from 1 through 12 {

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

    @include fullhd {
    @for $n from 1 through 12 {

    @include fullhd {
    .is-order-#{$n}-fullhd {
    order: #{$n} !important;
    }
    }
    }
    }
  4. vanderb revised this gist Aug 26, 2019. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions _flex-order.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,13 @@
    }
    }

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

    @include tablet {
    @for $n from 1 through 12 {
  5. vanderb created this gist Aug 26, 2019.
    77 changes: 77 additions & 0 deletions _flex-order.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    @for $n from 1 through 12 {
    .is-order-#{$n} {
    order: #{$n} !important;
    }
    }

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

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

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

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

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

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

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

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

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