body {margin:0;padding:0}

#container {

  width: 360px;

  margin: 0 auto;

  background: #f2f2f2;

  height: 100%;

  text-align: center

}

​

#first, #third {

  width:240px;

  height: 200px;

  background: #aaa;

  float:   left;

  text-align: center

}

​

#second {

  width: 120px;

  height: 200px;

  background: #f00;

  float: right;

  text-align: center

}

​

#third { background: yellow; float:left; clear: left;}

​

div {   transition:all .2s linear; 

    -o-transition:all .2s linear; 

    -moz-transition:all .2s linear; 

    -webkit-transition:all .2s linear;}

    @media only screen and (min-width: 480px) and (max-width: 767px)                             {

        #container {width: 300px;}

        #first, #third {width:300px;height: 200px;}

        #second {width: 300px;height: 200px;}

    }