Bootstrap grid column one split into two row, column two adjacent to it

Question

">"        col1             col2      
">"   |--------------|---------------|
">"   |   text1      |               | 
">"   |--------------|  navigation   | 
">"   |    text2     |               |
">"   |--------------|---------------|

I need to create grid like the diagram above to hold texts and navigational menu. so far I try different variation using row and span. the idea is col1 split into two and col2 should be next to it. the column on left split in two, column right same height but adjacent to column one.

    `<div class="row">  
            <div class="span6"> 
                <div class="row">
                    <div class="col-sm-6" style="background-color:blue;">AAAA</div>
               </div>       
              <div class="row">
                   <div class="col-sm-6" style="background-color:red;">BBBB</div>
              </div>    
            </div>  

            <div class="span6">

              <div class="row">
                   <div class="col-sm-12" style="background-color:yellow;">row2</div>
              </div>

            </div>  
        </div>`

Answer 1

This will help you. LINK

I added background-color so you could see the divs.

Answer 2

This should help

<div class="col-md-12">
<div class="col-md-6">
  <div class="row-fluid">
    <div class="span2">Text 1</div>
    <div class="span2">Text 2</div>
 </div>
</div>
<div class="col-md-6">
   Navigation
</div>
</div>