title: Issue with bootstrap responsiveness - overlapping of image and text
body: <p>When changing the size of the internet browser, everything seems to be responsive until get to a certain window size. When expanding my window, the container size of my site will jump from (944px X 240px) to (463.5px x 289px). Please help me figure out how to solve the overlapping issue!</p>
  
  <p>This is what it looks like, while expanding it, and before it overlaps:
  <img src="https://i.stack.imgur.com/GYKdV.png" alt="enter image description here"></p>
  
  <p>This is what it looks like, while expanding it, and it jumps to a smaller container and overlap:</p>
  
  <p><img src="https://i.stack.imgur.com/tAqJO.png" alt="enter image description here"></p>
  
  <p>If I keep expanding it, the container goes back to a normal size again and responsiveness looks good once again: 
  <img src="https://i.stack.imgur.com/S316b.png" alt="enter image description here"></p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row" style="margin-bottom: 15px;"&gt;
      &lt;div class="col-xs-12 col-md-6 col-md-offset-3" &gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-sm-3 col-sm-offset-1"&gt;
                      &lt;img src="/assets/img/blank_avatar.jpg" style="width: 200px; height: 200px;" class="img-circle"/&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 col-sm-8"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-xs-12 col-sm-6"&gt;
                                  &lt;h2&gt;Title&lt;/h2&gt;
                                  &lt;h4&gt;Testing header here&lt;/h4&gt;
                                  &lt;h4&gt;Testing header here&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-12 col-sm-6"&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;
                                              &lt;span&gt;Face&lt;/span&gt;
                                              &lt;i class="icon-grin"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;
                                              &lt;span&gt;Face&lt;/span&gt;
                                              &lt;i class="icon-neutral"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;
                                              &lt;span&gt;Star&lt;/span&gt;
                                              &lt;i class="fa fa-star"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;a class="btn btn-default btn" href="#"&gt;
                                      &lt;i class="icon-neutral"&gt;&lt;/i&gt;test
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>