ウィンドウサイズ別flexオーダーcss (uikit準拠)

uikitでflexのorderが無いので作りました。また、ウィンドウサイズ別でも対応しています。

普通のcssでも使えると思います。

_flex_order.scss

$flex_order: -1, 0, 1, 2, 3, 4;
$window_size_array: (
        \@s: 640px,
        \@m: 960px,
        \@l: 1200px,
        \@xl: 1600px,
);

@each $order in $flex_order {
   .uk-flex-order-#{$order} {
      order: $order;
   }
}

@each $window_size, $window_px in $window_size_array {
   @media (min-width: $window_px) {
      @each $order in $flex_order {
         .uk-flex-order-#{$order}#{$window_size} {
            order: $order;
         }
      }
   }
}

flex_order.css

.uk-flex-order--1 {
  order: -1; }

.uk-flex-order-0 {
  order: 0; }

.uk-flex-order-1 {
  order: 1; }

.uk-flex-order-2 {
  order: 2; }

.uk-flex-order-3 {
  order: 3; }

.uk-flex-order-4 {
  order: 4; }

@media (min-width: 640px) {
  .uk-flex-order--1\@s {
    order: -1; }

  .uk-flex-order-0\@s {
    order: 0; }

  .uk-flex-order-1\@s {
    order: 1; }

  .uk-flex-order-2\@s {
    order: 2; }

  .uk-flex-order-3\@s {
    order: 3; }

  .uk-flex-order-4\@s {
    order: 4; } }
@media (min-width: 960px) {
  .uk-flex-order--1\@m {
    order: -1; }

  .uk-flex-order-0\@m {
    order: 0; }

  .uk-flex-order-1\@m {
    order: 1; }

  .uk-flex-order-2\@m {
    order: 2; }

  .uk-flex-order-3\@m {
    order: 3; }

  .uk-flex-order-4\@m {
    order: 4; } }
@media (min-width: 1200px) {
  .uk-flex-order--1\@l {
    order: -1; }

  .uk-flex-order-0\@l {
    order: 0; }

  .uk-flex-order-1\@l {
    order: 1; }

  .uk-flex-order-2\@l {
    order: 2; }

  .uk-flex-order-3\@l {
    order: 3; }

  .uk-flex-order-4\@l {
    order: 4; } }
@media (min-width: 1600px) {
  .uk-flex-order--1\@xl {
    order: -1; }

  .uk-flex-order-0\@xl {
    order: 0; }

  .uk-flex-order-1\@xl {
    order: 1; }

  .uk-flex-order-2\@xl {
    order: 2; }

  .uk-flex-order-3\@xl {
    order: 3; }

  .uk-flex-order-4\@xl {
    order: 4; } }