title: Twitter bootstrap - nesting rows vs multiple rows
body: <p>I started to use Twitter bootstrap for this application that I am working on.</p>
  
  <p>I read the documentation about nesting rows in both fixed grid system and in fluid one.</p>
  
  <p>Now, I want to do something like this </p>
  
  <p><img src="https://i.stack.imgur.com/64SVs.png" alt="enter image description here"></p>
  
  <p>So of course I could do something like this</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span 12"&gt;red&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="span 3"&gt;yellow&lt;/div&gt;
              &lt;div class="span 9"&gt;green&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I think I would get what I want. But I am wondering what are the consequences of doing</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span 12"&gt;red&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="span 3"&gt;yellow&lt;/div&gt;
          &lt;div class="span 9"&gt;green&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single <code>container</code> tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?</p>