右侧栏的自举布局标记

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}