bootstrap layout markup for right sidebar

Question

This is what I want to achieve : http://i.imgur.com/n91OYWN.png

How can I construct the above layout using bootstrap? The left part (2 col) and the right has 1 col, I color them so you can see.

The problem is this is not a static site. So here's the take for the markup

<div class="row">
    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        orange
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        orange
    </div>

</div>

the orange and the white will mix up in mobile and above markup is hard to maintain because I have to loop using php to display the content for the white box.

Answer 1

Instead of using many rows , Use one row which contains three children divs .

<div class="row">
   <div class="col1 col-lg-4" id="left">
       <div>White 1</div>
       <div>White 1</div>
       <div>White 1</div>
       <div>White 1</div>
   </div>
   <div class="col2 col-lg-4" id="middle">
       <div>White 2</div>
       <div>White 2</div>
       <div>White 2</div>
       <div>White 2</div>
   </div>
   <div class="col3 col-lg-4" id="right">
       <div>Orange</div>
       <div>Orange</div>
   </div>
</div>

The children divs ( White 1 , White 2 and Orange ) may be dynamically generated, and insert them correctly to the targets ( #left , #middle , #right ) by code (either PHP or JS).

Answer 2

This is very easy to do with the push and pull classes that come with bootstrap 3.

DEMO: http://jsbin.com/riniri/1/

This will have orange on top on small viewports (under the col-lg- class) and will be on the right when it's at that min-width or larger.

  <div class="container">
     <div class="row">
        <div class="col-lg-4 col-lg-push-8">
           <div class="box orange"></div>
           <div class="box orange"></div>
        </div>
        <div class="col-lg-8  col-lg-pull-4">
           <div class="row">
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
           </div>
        </div>
     </div>
  </div>

DEMO CSS ONLY:

.box {width:100%;height:300px;margin-bottom:30px;border:5px solid #000}
.orange {background:orange}