<html>
<head>
  <title>Document</title>
</head>

<body>
  <div class="container">
     <div class="box"></div>
    
    <div class="col-12">
      hhh
    </div>
  
     <div class="row">
       <div class="col-4">
          <div class="box"></div>
       </div>
       <div class="col-4">
          <div class="box"></div>
       </div>
       <div class="col-4">
          <div class="box"></div>
       </div>
    </div>
  
  
    <div class="row">
       <div class="col-6">
          <div class="box"></div>
       </div>
       <div class="col-6">
          <div class="box"></div>
       </div>
    </div>

    <div class="row">
       <div class="col-3">
          <div class="box"></div>
       </div>
       <div class="col-3">
          <div class="box"></div>
       </div>
      <div class="col-3">
          <div class="box"></div>
       </div>
      <div class="col-3">
          <div class="box"></div>
       </div>
    </div>
  
  </div>
  
</body>

</html>
$gutter-width:30px;
$grid-num:12;

*{
  box-sizing:border-box;
}

body{
  padding:0;
  margin:0;
}

.container{
  margin: 0 auto;
  max-width:960px;
  padding: 0 $gutter-width/2;
}

.row{
  display:flex;
  margin-left: -($gutter-width/2);
  margin-right: -($gutter-width/2);
  flex-wrap:wrap;
}

@for $i from 1 through $grid-num{
  .col-#{$i}{
    @extend %col;
  }
}

%col{
   position:relative;
   min-height:1px;
   max-width:100%;
   flex: 0 0 100%;
   padding: 0 $gutter-width/2;
}

@media (min-width:768px){
  @for $i from 1 through $grid-num{
    .col-#{$i}{
      max-width:100% * ($i/$grid-num);
      flex: 0 0 (100% * ($i/$grid-num));
    }
  }
}

.box{
  height:50px;
  background: gray; 
}

.col-3:nth-child(4n+2) .box,
.col-4:nth-child(3n+2) .box,
.col-6:nth-child(even) .box{
  background: blue; 
}

.col-3:nth-child(4n+3) .box,
.col-4:nth-child(3n) .box{
  background: red; 
}

.col-3:nth-child(4n) .box{
  background: green; 
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.