.row {
  display: flex;
  flex-wrap: wrap;

  @for $i from 1 through 12 {
    $r: 100% / 12 * $i;
    @media screen and (max-width: 768px){
      .col-sm-#{$i} {
        max-width: $r;
        width: 100%;
        min-height: 1px;
        box-sizing: border-box;
        flex: 0 0 $r
      }
    }
    @media screen and (min-width: 768px){
      .col-md-#{$i} {
        max-width: $r;
        width: 100%;
        min-height: 1px;
        box-sizing: border-box;
        flex: 0 0 $r
      }
    }
  }
}

.items-center {
  align-items: center;
}
.flex-center {
  justify-content: center
}