Twitter bootstrap - nesting rows vs multiple rows

Question

I started to use Twitter bootstrap for this application that I am working on.

I read the documentation about nesting rows in both fixed grid system and in fluid one.

Now, I want to do something like this

So of course I could do something like this

<div class="container">
    <div class="row">
        <div class="span 12">red</div>
        <div class="row">
            <div class="span 3">yellow</div>
            <div class="span 9">green</div>
        </div>
    </div>
</div>

and I think I would get what I want. But I am wondering what are the consequences of doing

<div class="container">
    <div class="row">
        <div class="span 12">red</div>
    </div>
    <div class="row">
        <div class="span 3">yellow</div>
        <div class="span 9">green</div>
    </div>
</div>

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 container 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?

Answer 1

The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better

However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"

Also remove the spaces between the spans and numbers

class="span 3"

Should say

class="span3"