$small: -sm;
$medium: -md;
$large: -lg;
$extraLarge: -xl;

[class^="col-"] {
  float: left;
}

@mixin column($type) {
  .col-1#{$type} {
    width: 8.33333%;
  }
  .col-2#{$type} {
    width: 16.66667%;
  }
  .col-3#{$type} {
    width: 25%;
  }
  .col-4#{$type} {
    width: 33.33333%;
  }
  .col-5#{$type} {
    width: 41.66667%;
  }
  .col-6#{$type} {
    width: 50%;
  }
  .col-7#{$type} {
    width: 58.33333%;
  }
  .col-8#{$type} {
    width: 66.66667%;
  }
  .col-9#{$type} {
    width: 75%;
  }
  .col-10#{$type} {
    width: 83.33333%;
  }
  .col-11#{$type} {
    width: 91.66667%;
  }
  .col-12#{$type} {
    width: 100%
  }
}

@mixin reorder($type) {
  .col-reorder-first#{$type} {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .col-reorder-last#{$type} {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }

  @for $i from 1 through 12 {
    .col-reorder-#{$i}#{$type} {
      -webkit-box-ordinal-group: $i;
      -ms-flex-order: $i;
      order: $i;
    }
  }
}

@include column('');
@include reorder('');
@media (max-width: 1200px) {
  @include column($extraLarge);
  @include reorder($extraLarge);
}

@media (max-width: 992px) {
  @include column($large);
  @include reorder($large);
}

@media (max-width: 768px) {
  @include column($medium);
  @include reorder($medium);
}

@media (max-width: 576px) {
  @include column($small);
  @include reorder($small);
}