/* one column */
.area1 {
}

.area2 {
}

.area3 {
}

.area4 {
}

.area5 {
}

.area6 {
}

.bottom {
clear:both;
}

/* two column  */
@media only screen and (min-width : 481px) { 
  .area1,
  .area2,
  .area3,
  .area4,
  .area5,
  .area6 {
    clear:none;
    float:left;
    width:50%;
  }

  .area3,
  .area5 {
    clear: both;
  }
}

/* three column */
@media only screen and (min-width: 769px) {
  .area1,
  .area2,
  .area3,
  .area4,
  .area5,
  .area6 {
    clear:none;
    float:left;
    width:33.3%;
  }

  .area4 {
    clear: both;
  }
  
}