@mixin col-flex() {

-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;

}

@mixin col-num($i) {

$percent: (100% / $col-total) * $i;
flex: 0 0 #{$percent};
max-width: #{$percent};

}

@mixin col-basic() {

position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;

}

@mixin col-auto() {

flex: 0 0 auto;
width: auto;
max-width: none;

}

%col-basic {

@include col-basic;

}

%col-auto {

@include col-auto;

}

.row {

@extend %row;

}

.col {

@extend %col-basic;
@include col-flex;

}

.col-auto {

@extend %col-basic;
@extend %col-auto;

}

@for $i from 1 through length($breakpoints) {

$size: nth($screen-sizes, $i);
.col-#{$size} {
  @extend %col-basic;
}
@for $j from 1 through $col-total {
  .col-#{$j},
  .col-#{$size}-#{$j} {
    @extend %col-basic;
  }
}

}

@for $i from 1 through $col-total {

.col-#{$i} {
  @include col-num($i);
}

}

@for $i from 1 through length($breakpoints) {

$breakpoint: nth($breakpoints, $i);
$size: nth($screen-sizes, $i);
@media (min-width: $breakpoint) {
  %col-auto-#{$size} {
    @include col-auto;
  }
  .col-#{$size} {
    @include col-flex;
  }
  @for $j from 1 through $col-total {
    .col-#{$size}-#{$j} {
      @include col-num($j);
    }
  }
  .col-#{$size}-auto {
    @extend %col-auto-#{$size};
  }
}

}