缩小到移动屏幕时，页脚中容器内的内容重叠

Question

我在页脚中创建了一个包含三列的容器。当重新调整到 600 像素以下时，Divs 显示在彼此的顶部。我想让内容一个接一个地显示？

代码如下：

HTML：

<footer> 
<div class="footwrap">
<div class="footleft">
<h2>Far East Festival Ltd</br></h2>
<div class="subhead">
Registered Address: </br></div>
3 Bina Court, </br>
2 Rickmansworth Road, Northwood,<br> 
London, United Kingdom <br>
HA61HA</br>       
<div class="subhead">Tel:<br></div>
(+44) 07415135072<br>
<div class="subhead">Email:<br></div>
info@fareastfestival.com<br>     
</div>
<div class="footcenter">
<h2>Our Sponsors</h2>
Coming Soon<br><br>
<a href="http://fareastfestival.com/get-involved.html">Become a Sponsor</a>
</div>
<div class="footright">
<h2>Social Media</h2>
To find out the latest #FEF news, follow us on: <br>
<div class="subhead">Twitter:</div> @Fareastfestival<br>
<div class="subhead">Facebook:</div>/fareastfest<br>
<div class="subhead">instagram:</div>@fareastfest <br>
<div class="subhead">Pinterest:</div>fareastfestival<br><br>
<div id="socialfoot">        
<a href="https://www.facebook.com/fareastfest" target="_blank"><img     src="facebook.png" /></a>
<a href="https://twitter.com/Fareastfestival" target="_blank"><img src="twitter.png" /></a>
<a href="https://uk.pinterest.com/fareastfestival/" target="_blank"><img src="pinterest.png" /></a>
<a href="https://instagram.com/fareastfest" target="_blank"> <img src="instagram.png" /></a>
</div><br>
#FarEastFest #FEF2016
</div>
</div>  
</footer>

CSS：

@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;
}
}

任何想法我能做什么？

访问 www.fareastfestival.com 查看

Answer 1

@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: 100px 0px;
  background-color: lightgrey;}

  .footwrap {
    width: 100%;
    display: block;
  }

  .footleft {
   text-align: center;
   width: 100%;
   position: relative;
   top:22px;
  }

  .footcenter {
   text-align: center;
   width: 100%;
   padding: 20;
   position: relative;
   top:22px;
  }

  .footright {
   text-align: center;
   width: 100%;
   padding: 20;
   position: relative;
   top:22px;
  }
}

Answer 2

像这样更新你的 CSS

.footwrap {
    overflow: hidden;
    width: 100%;
}
.footleft, .footcenter, .footright {
    float: left;
    text-align: left;
    width: 33.33%;
}

@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;
  }
  .footleft, .footcenter, .footright {
      float: none;
      text-align: center;
      width: 100%;
  }
}