title: Bootstrap- elements overlap on extra small size
body: <p>I have <code>recent-posts</code> div that show two post with their images and text. after <code>recent-posts</code> I have another div <code>contact-us</code> that contain an image and some text. My issue appear in extra-small size where <code>recent-posts</code> posts go under <code>contact-us</code> part. How can I fix that? The following is my codes and JsFiddle.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="recent-posts" class="center-block row"&gt;
              &lt;div class="posts col-md-3 col-sm-5 col-xs-9"&gt;
                      &lt;div class="posts-div"&gt;
                          &lt;div class="img-hover"&gt;
                              &lt;img src="images/post1.jpg" class="img-responsive"&gt;
                              &lt;div class="overlay col-md-12 col-xs-12"&gt;
                                  &lt;div&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span class="fa fa-heart"&gt;&lt;/span&gt;&lt;/span&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span&gt;16&lt;/span&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span class="fa fa-eye"&gt;&lt;/span&gt;&lt;/span&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span&gt;16&lt;/span&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                       &lt;p class="text-center"&gt;dsfdsfsdfldshfdskfhdsf&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="posts col-md-3 col-sm-5 col-xs-9"&gt;
                      &lt;div class="posts-div"&gt;
                          &lt;div class="img-hover"&gt;
                              &lt;img src="images/post2.jpg" class="img-responsive"&gt;
                              &lt;div class="overlay col-md-12 col-xs-12"&gt;
                                  &lt;div&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span class="fa fa-heart "&gt;&lt;/span&gt;&lt;/span&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span&gt;16&lt;/span&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span class="fa fa-eye "&gt;&lt;/span&gt;&lt;/span&gt;
                                      &lt;span class="fa fa-2x fa-square post-icon" &gt;&lt;span&gt;16&lt;/span&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;p class="text-center"&gt;dsjkfhjdssafjsdkjhfdsf&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;div id="contact-us" class="row"&gt;
              &lt;div class="col-md-12 col-xs-12"&gt;
                  &lt;img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive"&gt;
                  &lt;div id="contact-us-text"&gt;
                      &lt;p&gt;sdkf,sd,kfnds,nf,d.....&lt;/p&gt;
                      &lt;p&gt;kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d&lt;/p&gt;
                      &lt;button class="btn btn-success pull-left"&gt;124234234&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/5c2ujtnj/" rel="nofollow noreferrer">JsFiddle</a></p>