-1
我使用Twitter Bootstrap3。我有一个页脚部分（灰色部分），上面是一些divs。我给了那些divscol-xs-12类到移动设备div垂直显示，但问题是在移动大小，那些divs位于我的页脚，甚至在页面的底部。问题是什么？我的代码和JsFiddle正在关注。Bootstrap-元素重叠在特别小的尺寸
HTML：
<div id="pre-footer" class="center-block">
<div class="adv-clickable col-md-3 col-xs-12">
<a href="#"><p>تبلیغات کلیکی</p></a>
<a href="#"><p>قوانین</p></a>
<a href="#"><p>آگهی‌دهندگان</p></a>
<a href="#"><p>نمایش دهندگان</p></a>
<a href="#"><p>سوالات متداول</p></a>
<a href="#"><p>هزینه‌ها</p></a>
<a href="#"><p>تسویه حساب با نمایش‌دهندگان</p></a>
</div>
<div class="adv-clickable col-md-3 col-xs-12 center-block">
<a href="#"><p>تبلیغات کلیکی</p></a>
<a href="#"><p>قوانین</p></a>
<a href="#"><p>آگهی‌دهندگان</p></a>
<a href="#"><p>نمایش دهندگان</p></a>
<a href="#"><p>سوالات متداول</p></a>
<a href="#"><p>هزینه‌ها</p></a>
<a href="#"><p>تسویه حساب با نمایش‌دهندگان</p></a>
</div>
<div id="pre-footer-nested1" class="col-md-3 col-xs-12 center-block">
<img src="images/pre-footer-logo.png">
<div id="socials">
<a href="#"><i class="fa fa-3x fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-3x fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-3x fa-linkedin-square"></i></a>
<a href="#"><i class="fa fa-3x fa-instagram"></i></a>
<a href="#"><i class="fa fa-3x fa-telegram"></i></a>
</div>
<form action="#" class="form-group">
<label for="email">از آخرین اخبار آموزشی و تبلیغاتی با خبر شوید</label>
<input type="email" id="email" class="form-control" placeholder="آدرس ایمیل خود را وارد کنید" >
<input type="submit" value="ثبت‌نام در خبر نامه" class="btn btn-block btn-success">
</form>
</div>
<div id="pre-footer-nested2" class="col-md-3 col-xs-12">
<img src="images/nemad.jpg" >
<div class="col-md-12">
<div class="footer-logos">
</div>
<div class="footer-logos">
</div>
<div class="footer-logos">
</div>
<div class="footer-logos">
</div>
</div>
</div>
</div>
<div id="footer" class="col-md-12">
<p class="color-white">©کپی‌رایت ۱۳۹۶ کسب و کارهای نوپای خاورزمین</p>
</div>
CSS：
#pre-footer{
width: 75%;
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 150px;
position: relative;
}
.adv-clickable{
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.adv-clickable a:first-child p{
margin-bottom: 30px;
}
.adv-clickable p{
color: #606060;
font-size: 12px;
font-weight: bold;
}
.adv-clickable a{
text-decoration: none;
}
#pre-footer-nested1{
display: flex;
flex-direction: column;
justify-content: center;
}
#pre-footer-nested1 img{
width: 40px;
height: 40px;
margin: 0 auto;
}
#pre-footer-nested2{
display: flex;
flex-direction: column;
justify-content: center;
}
#socials{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#socials i{
color: #01a89e;
}
#pre-footer-nested1 form{
margin-top: 20px;
}
#pre-footer-nested1 form label{
font-size: 10px;
font-weight: bold;
margin-bottom: 10px;
}
#pre-footer-nested1 input:last-child{
margin-top: 10px;
background-color: #01a89e;
}
#pre-footer-nested1 input:last-child:active{
background-color: #0f8079;
}
#pre-footer-nested2{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
#pre-footer-nested2 img{
width: 100px;
height: 120px;
}
#pre-footer-nested2 div{
display: flex;
margin-top: 22px;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-logos{
width: 40px;
height: 40px;
border: 1px solid #9d9d9d;
border-radius: 5px;
}
#footer{
margin-top: 70px;
background-color: #333333;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
}
#footer p{
color: #ccc;
font-size: 11px;
}
JsFiddle 我该如何解决呢？