title: Twitter Bootstrap - Div content floating over top of div below
body: <p>I have my page laid out like this:</p>
  
  <p>[ ROW 1 Col 1  Col 2 ]</p>
  
  <p>[ ROW 2 Col 1  ]</p>
  
  <p>When I shrink the browser window (i.e. to test responsive behaviour) I want Row 1 to push Row 2 down to make room for its content, like this:</p>
  
  <p>[ ROW 1 Col 1 ]</p>
  
  <p>[ ROW 1 Col 2 ]</p>
  
  <p>[ ROW 2 Col   ]</p>
  
  <p>The problem is that when I shrink the browser Row 2 stays fixed in place and the text in Col 2 of Row 1 floats down over the top of Row 2.</p>
  
  <p>Does any one have an idea why this might be?  As far as I can tell, it's standard for twitter bootstrap divs to fold vertically at breakpoints. Mine don't do that.  I've spent a few hours reading and trying-out several things (clearfix, re-arranging the divs etc) , but can't figure it out.</p>
  
  <p>Here is the code:</p>
  
  <p>In the  section I have:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  </code></pre>
  
  <p>And the body:</p>
  
  <p></p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;!-- ROW 1 --&gt;
      &lt;div class="row"&gt; 
  
          &lt;!-- COL 1 --&gt;
          &lt;div class="col-md-8"&gt;           
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- COL 2 --&gt;
          &lt;div class="col-md-4"&gt; 
               &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- ROW 2 --&gt;
      &lt;div class="row"&gt; 
  
          &lt;!-- COL 1 --&gt;
          &lt;div class='col-md-12'&gt; 
              &lt;h1&gt; Another section&lt;/h1&gt; 
  
              &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt; &lt;!-- end of Container --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>It's probably staring me in the face, but I can't see it.</p>
  
  <p>Many thanks.</p>
  
  <p>I was asked for my CSS classes. I am using the latest version of Bootstrap plus the following:</p>
  
  <pre><code>.row {
    margin-right: 0;
    margin-left: 0;
   background-color: #FFFFFF;
  }
  
  .container{
    border:1px solid #000000;
  }
  </code></pre>