右側欄的自舉布局標記

Question

這就是我想要實現的： http : //i.imgur.com/n91OYWN.png

如何使用引導程序構造上述布局？ 左邊的部分（2列），右邊的部分為1列，我給它們上色，以便您看到。

問題是這不是一個靜態站點。 所以這是加價的要點

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

橙色和白色將在移動設備中混合在一起，並且上面的標記很難維護，因為我必須循環使用php來顯示白色框的內容。

Answer 1

與其使用很多rows ， divs使用包含三個子divs row 。

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

子divs （ White 1 ， White 2和Orange ）可以動態生成，並通過代碼（PHP或JS）將它們正確插入目標（ #left ， #middle ， #right ）。

Answer 2

這很容易通過bootstrap 3附帶的push和pull類來完成。

演示： http : //jsbin.com/riniri/1/

在最小視口（在col-lg-類之下）上，該圖標的頂部將顯示橙色，而在最小寬度或更大的最小視口上，該圖標將顯示在右側。

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

僅演示CSS：

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