title: Content within container in footer overlaps when reduced to mobile screen
body: <p>I've created a container within my Footer with three columns. When re-sized to below 600px, the Divs display on top of each other. I'd like for the content to be displayed one after another?</p>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;footer&gt; 
  &lt;div class="footwrap"&gt;
  &lt;div class="footleft"&gt;
  &lt;h2&gt;Far East Festival Ltd&lt;/br&gt;&lt;/h2&gt;
  &lt;div class="subhead"&gt;
  Registered Address: &lt;/br&gt;&lt;/div&gt;
  3 Bina Court, &lt;/br&gt;
  2 Rickmansworth Road, Northwood,&lt;br&gt; 
  London, United Kingdom &lt;br&gt;
  HA61HA&lt;/br&gt;       
  &lt;div class="subhead"&gt;Tel:&lt;br&gt;&lt;/div&gt;
  (+44) 07415135072&lt;br&gt;
  &lt;div class="subhead"&gt;Email:&lt;br&gt;&lt;/div&gt;
  info@fareastfestival.com&lt;br&gt;     
  &lt;/div&gt;
  &lt;div class="footcenter"&gt;
  &lt;h2&gt;Our Sponsors&lt;/h2&gt;
  Coming Soon&lt;br&gt;&lt;br&gt;
  &lt;a href="http://fareastfestival.com/get-involved.html"&gt;Become a Sponsor&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="footright"&gt;
  &lt;h2&gt;Social Media&lt;/h2&gt;
  To find out the latest #FEF news, follow us on: &lt;br&gt;
  &lt;div class="subhead"&gt;Twitter:&lt;/div&gt; @Fareastfestival&lt;br&gt;
  &lt;div class="subhead"&gt;Facebook:&lt;/div&gt;/fareastfest&lt;br&gt;
  &lt;div class="subhead"&gt;instagram:&lt;/div&gt;@fareastfest &lt;br&gt;
  &lt;div class="subhead"&gt;Pinterest:&lt;/div&gt;fareastfestival&lt;br&gt;&lt;br&gt;
  &lt;div id="socialfoot"&gt;        
  &lt;a href="https://www.facebook.com/fareastfest" target="_blank"&gt;&lt;img     src="facebook.png" /&gt;&lt;/a&gt;
  &lt;a href="https://twitter.com/Fareastfestival" target="_blank"&gt;&lt;img src="twitter.png" /&gt;&lt;/a&gt;
  &lt;a href="https://uk.pinterest.com/fareastfestival/" target="_blank"&gt;&lt;img src="pinterest.png" /&gt;&lt;/a&gt;
  &lt;a href="https://instagram.com/fareastfest" target="_blank"&gt; &lt;img src="instagram.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;br&gt;
  #FarEastFest #FEF2016
  &lt;/div&gt;
  &lt;/div&gt;  
  &lt;/footer&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media (max-width: 600px) {
  footer {
  width: 100%;
  clear: both;
  text-align: center;
  font-family: raleway;
  font-size: 90%;
  font-style: normal;
  color: black;
  font-variant: normal;
  padding: 40px 0px;
  background-color: lightgrey;}
  .footwrap {
  width: 100%;
  display: block;
  }
  .footleft {
  text-align: center;
  width: 100%;
  position: none;
  top: none;
  }
  .footcenter {
  text-align: center;
  width: 100%;
  padding: 0;
  position: none;
  top: none;
  }
  .footright {
  text-align: center;
  width: 100%;
  padding: 0;
  position: none;
  top: none;
  }
  }
  </code></pre>
  
  <p>Any ideas what I can do?</p>
  
  <p>See www.fareastfestival.com to view</p>