Bootstrap- elements overlap on extra small size - html

Question

I have recent-posts div that show two post with their images and text. after recent-posts I have another div contact-us that contain an image and some text. My issue appear in extra-small size where recent-posts posts go under contact-us part. How can I fix that? The following is my codes and JsFiddle.
HTML:
<div id="recent-posts" class="center-block row">
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post1.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsfdsfsdfldshfdskfhdsf</div>
</div>
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post2.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsjkfhjdssafjsdkjhfdsf</p>
</div>
</div>
</div>
<div id="contact-us" class="row">
<div class="col-md-12 col-xs-12">
<img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive">
<div id="contact-us-text">
<p>sdkf,sd,kfnds,nf,d.....</p>
<p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p>
<button class="btn btn-success pull-left">124234234</button>
</div>
</div>
</div>
Css:
#recent-posts{
height: 350px;
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
.posts{
display: flex;
flex-direction: column;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
padding: 0;
margin-left: 20px;
margin-right: 20px;
}
.posts img{
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
position: absolute;
background-color: #01a89e;
width: 50%;
color: #101010;
cursor: auto;
margin-top: -17px;
margin-right: 25%;
}
.posts .btn-success:active{
background-color: #01a89e;
color: #101010;
box-shadow: none;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: auto;
overflow: hidden;
}
.img-hover{
position: relative;
}
.post-icon{
color: rgba(255, 255, 255, 1);
transform: rotate(45deg);
opacity: 1;
}
.post-icon span{
transform: rotate(-45deg);
font-size: 12px;
position: absolute;
left: 50%;
top: 0.6em;
margin-left: -7px;
color: #101010;
font-weight: bold;
}
.fa-heart{
color: red !important;
}
#contact-us{
height: 200px;
margin-bottom: 30px;
box-shadow: 0 1px 5px #666666, 0 -1px 5px #666666;
position: relative;
padding: 0;
overflow: hidden;
}
#contact-us-text{
position: absolute;
top: 20%;
left: 12%;
}
#contact-us-text p{
color: white;
}
#contact-us-text .btn-success{
background-color: #01a89e;
cursor: auto;
}
#contact-us-text .btn-success:active{
background-color: #01a89e;
box-shadow: none;
}
JsFiddle

Answer 1

Recent-posts class has a fixed height.
#recent-posts{
height: 350px; // THIS LINE IS THE REASON!
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
Updated fiddle