SOURCE

<div class="container">
  <div class="col-6 col-md-4 col-lg-2 bg-gray"></div>
  <div class="col-6 col-md-4 col-lg-2 bg-gray"></div>
  <div class="col-6 col-md-4 col-lg-2 bg-gray"></div>
  <div class="col-6 col-md-4 col-lg-2 bg-gray"></div>
  <div class="col-6 col-md-4 col-lg-2 bg-gray"></div>
  <div class="col-6 col-md-4 col-lg-2 bg-gray"></div>
</div>

// 断点
.container{
  display: flex;
  flex-flow: row wrap;
}
$grid-breakpoints:(
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
);
$grid-columns: 12;
@function breakpoint-min($name, $breakpoints: $grid-breakpoints){
    $val: map-get($breakpoints, $name);
    @return $val == 0;
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints){
    @return if(
        breakpoint-min($name, $breakpoints),
        "", "-#{$name}"
    );
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints){
    // 最小的断点不需要媒体查询
    @if breakpoint-min($name, $breakpoints){
        @content
    }@else{
        @media (min-width: map-get($breakpoints, $name)){
            @content
        }
    }
}

@mixin make-col($size, $columns: $grid-columns){
    flex: 0 0 percentage($size / $columns);
}

@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints){
    @each $name in map-keys($breakpoints){
            $infix: breakpoint-infix($name, $breakpoints);
            @include media-breakpoint-up($name, $breakpoints){
                @for $i from 1 through $columns{
                    .col#{$infix}-#{$i}{
                        @include make-col($i, $columns);
                    }
            }
        }
    }
}

@include make-grid-columns();

.bg-gray{
  height: 200px;
  background: gray;
  padding: 1px;
  background-clip: content-box;
  box-sizing: border-box;
}