Create Two / Three Column Responsive Layout

Two column layout

HTML

<div class="divleft" style="background-color:green; height:200px"> </div>
<div class="divright" style="background-color:yellow; height:200px"> </div>

CSS 

.divleft {
  width: 50%;
  float: left;
}
.divright {
  width: 50%;
  float: right;
} 

//make div width 100% 
@media screen and (max-width:900px){
 .divleft {
  width: 100%;
  }
   .divright {
  width: 100%;
  }
}

Three column layout

HTML

<div class= "divleft" style="background-color:green; height:200px"> </div>
<div class= "divmiddle" style="background-color:purple; height:200px"> </div>
<div class= "divright" style="background-color:yellow; height:200px"> </div>

CSS 

//Fixed width for left div

.divleft {

  width: 600px;

  float:left;

}

//width - 50%

.divmiddle {

    float:left;

  width: -webkit-calc((100% - 600px)/2);

}

.divright {

    float:left;

  width: -webkit-calc((100% - 600px)/2);

}

//Move right div down and make 100% width

@media screen and (max-width:1000px) {

  .divmiddle {

    width: -webkit-calc((100% - 600px));

  }

  .divright {

    width: 100%;

  }

}

//make 100% width

@media screen and (max-width:600px) {

    .divleft {

    width: 100%;

  }

  .divmiddle {

    width: 100%;

  }

  .divright {

    width: 100%;

  }

}