title: Bootstrap grid column one split into two row, column two adjacent to it
body: <pre><code>"&gt;"        col1             col2      
  "&gt;"   |--------------|---------------|
  "&gt;"   |   text1      |               | 
  "&gt;"   |--------------|  navigation   | 
  "&gt;"   |    text2     |               |
  "&gt;"   |--------------|---------------|
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>    `&lt;div class="row"&gt;  
              &lt;div class="span6"&gt; 
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-6" style="background-color:blue;"&gt;AAAA&lt;/div&gt;
                 &lt;/div&gt;       
                &lt;div class="row"&gt;
                     &lt;div class="col-sm-6" style="background-color:red;"&gt;BBBB&lt;/div&gt;
                &lt;/div&gt;    
              &lt;/div&gt;  
  
              &lt;div class="span6"&gt;
  
                &lt;div class="row"&gt;
                     &lt;div class="col-sm-12" style="background-color:yellow;"&gt;row2&lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;  
          &lt;/div&gt;`
  </code></pre>