How do I make 2 or more horizontal divs stack into a vertical div when the user shrinks the browser window?

Question

I have 2 divs on same row, each with a width of 50% and a float: left. I would like them to stack one on top of the other if the user is viewing the page from a smart-phone. Rig

Answer 1

Use media queries:

@media screen and (min-width: 321px) {
  #wrapper {width: 100%;}
  .content {
    width: 50%;
    float: left;
  }
}
@media screen and (max-width: 320px) {
  #wrapper {width: 100%;}
  .content {
    width: 100%;
    float: none;
  }
}