responsive divs using breakpoints

from http://www.branditwebdesign.com/setting-up-divs-for-responsive-web-development/

by Andy Bulka

HTML

<div class="wrapper">
  <div class="container">
    <div class="one_third">...A1</div>
    <div class="one_third">...A2</div>
    <div class="one_third last">...A3</div>
    <div class="one_third">...B1</div>
    <div class="one_third">...B2</div>
  </div>
</div>

CSS

div {background: #F0C0C0;}
.wrapper {width: 100%;}
.container {width: 940px; padding: 0px 10px; margin: 0px auto;}

.one_third, .one_half, .two_thirds, .one_fourth, .one_sixth {
margin-right: 20px; margin-bottom: 15px; float: left;
}
.one_third {width: 300px;}
.one_half {width: 460px;}
.two_thirds {width: 620px;}
.one_fourth {width: 220px;}
.one_sixth {width: 140px;}

.last {margin-right: 0px !important;}

/* iPad */
@media (min-width: 768px) and (max-width: 960px) {
.container {width: 748px;}

.one_third {width: 236px;}
.one_half {width: 364px;}
.two_thirds {width: 492px;}
.one_fourth {width: 172px;}
.one_sixth {width: 108px;}
div {background: #C0C0C0;}
}

/* Smart Phone Sideways */
@media (min-width: 639px) and (max-width: 767px) { 
.container {width: 620px;}

.one_third {width: 193px;}
.one_half {width: 300px;}
.two_thirds {width: 387px;}
.one_fourth {width: 140px;}
.one_sixth {width: 86px;}
div {background: #00C0C0;}

}

/* Smart Phone */
@media (min-width: 1px) and (max-width: 638px) {
.container {width: 300px;}
.one_third, .one_half, .two_thirds, .one_fourth, .one_sixth {
width: 300px; margin-right: 0px; }
div {background: #20C3C0;}

}