<div class="row">

  <div class="col -r"></div><!--col-->
  
  <div class="col -g"></div><!--col-->
  
  <div class="col -b"></div><!--col-->
    
</div><!--row-->
.row{
   margin: 0 -10px;
}
.col{
  float: left;
  paddding: 0 10px;
  width: 100%;
  height: 100px; 
}
.col.-r{ background-color: red;  }
.col.-g{ background-color: green;}
.col.-b{ background-color: blue; }
@media (min-width:784px) {
  
.col{
  width: 50%;
}
  
}
@media (min-width:992px){

  .col{
    width: 33.3333%;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.