$columns: 12; $container-base-width: 1200px; $container-offset: $base-spacing-unit;

$mobile: 576px; $tablet: 768px; $desktop: 992px;

$mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );

.container {

max-width: $container-base-width;
padding-left: $container-offset;
padding-right: $container-offset;
margin: 0 auto;

}

.container-full {

max-width: 100%;
padding-left: $container-offset;
padding-right: $container-offset;
margin: 0 auto;

}

.row {

display: flex;
flex-wrap: wrap;
flex: 0 1 auto;
flex-direction: row;
box-sizing: border-box;
margin-left: ($base-spacing-unit * -1);
margin-right: ($base-spacing-unit * -1);

}

.col {

padding-left: $base-spacing-unit;
padding-right: $base-spacing-unit;

}

class^=“col-”

{

flex: auto;

}

/* ========== MOBILE FIRST ========== */

// MOBILE @for $i from 0 through $columns {

.col-#{$i} {
  width: percentage( $i / $columns );
}

}

@for $i from 0 through $columns {

.push-#{$i} {
  margin-left: percentage( $i / $columns );
}

}

@for $i from 0 through $columns {

.pull-#{$i} {
  margin-right: percentage( $i / $columns );
}

}

@each $key, $val in $mq {

// TABLET
@media(min-width: $tablet) {
  @for $i from 0 through $columns {
    .col-t-#{$i} {
      width: percentage( $i / $columns );
    }
  }
  @for $i from 0 through $columns {
    .push-t-#{$i} {
      margin-left: percentage( $i / $columns );
    }
  }
  @for $i from 0 through $columns {
    .pull-t-#{$i} {
      margin-right: percentage( $i / $columns );
    }
  }
}
// DESKTOP
@media(min-width: $desktop) {
  @for $i from 0 through $columns {
    .col-d-#{$i} {
      width: percentage( $i / $columns );
    }
  }
  @for $i from 0 through $columns {
    .push-d-#{$i} {
      margin-left: percentage( $i / $columns );
    }
  }
  @for $i from 0 through $columns {
    .pull-d-#{$i} {
      margin-right: percentage( $i / $columns );
    }
  }
}

}

@media(min-width: $desktop) {

.d-hide {
  display: none !important;
}
.d-show {
  display: block !important;
}

}