Style/assets/scss/grid.scss

.row {
  display: flex;
  flex-direction: row;
  list-style: none;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-right: 10px;

  $one: calc(100 / 12 * 1%);

  @for $i from 1 through 12 {
    .col-#{$i} {
      flex-basis: calc($one * $i);
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

/* s1 smartphones, iPhone, portrait 480x320 phones */
@media (max-width:320px)  {
  $one: calc(100 / 12 * 1%);
  @for $i from 1 through 12 {
    .col-s1-#{$i} {
      flex-basis: calc($one * $i) !important;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

/* s2 portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media (max-width:481px)  {
  $one: calc(100 / 12 * 1%);
  @for $i from 1 through 12 {
    .col-s2-#{$i} {
      flex-basis: calc($one * $i) !important;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

/* s3 portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media (max-width:641px)  {
  $one: calc(100 / 12 * 1%);
  @for $i from 1 through 12 {
    .col-s3-#{$i} {
      flex-basis: calc($one * $i) !important;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

/* s4 tablet, landscape iPad, lo-res laptops ands desktops */
@media (max-width:961px)  {
  $one: calc(100 / 12 * 1%);
  @for $i from 1 through 12 {
    .col-s4-#{$i} {
      flex-basis: calc($one * $i) !important;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

/* s5 big landscape tablets, laptops, and desktops */
@media (max-width:1025px) {
  $one: calc(100 / 12 * 1%);
  @for $i from 1 through 12 {
    .col-s5-#{$i} {
      flex-basis: calc($one * $i) !important;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

/* s6 hi-res laptops and desktops */
@media (max-width:1281px) {
  $one: calc(100 / 12 * 1%);
  @for $i from 1 through 12 {
    .col-s6-#{$i} {
      flex-basis: calc($one * $i) !important;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}