SOURCE

<section class="row">
  <div  style=" background-color:lightblue;" class="col-md-3 col-sm-3 col-xs-offset-3 ">
    左边
    <section class="row" >
      <div class="col-xs-6">1</div>
      <div class="col-xs-6">2</div>
       <div class="col-xs-6">3</div>
      <div class="col-xs-6">4</div>
    </section>
  </div>
  <div style="background-color:orange;" class="col-md-6 col-sm-9 col-md-offset-4">
    中间
    
  </div>
  <div style=" background-color:pink;" class="col-md-3 col-sm-12">
    右边
  </div>
  </section>
<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-xs-4" style="background-color:pink;
         box-shadow: iet 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-xs-8" style="background-color: lightblue;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-xs-4 col-xs-push-8" 
         style="background-color: pink;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-xs-8 col-xs-pull-4" 
         style="background-color: lightblue;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>

</div>
<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-xs-3" style="background-color: orange; color:white;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>走在乡间的小路上</p>
      </div>

      <div class="col-xs-9" style="background-color:pink;color:white;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分为四个盒子</h4>
         <div class="row">
            <div class="col-xs-6" style="background-color: lightblue;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>心火烧
               </p>
            </div>
            <div class="col-xs-6" style="background-color: pink;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> 心火烧
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-xs-6" style="background-color: pink;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>心扉呀
               </p>
            </div>   
            <div class="col-xs-6" style="background-color: lightblue;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>关不住了</p>
            </div>
         </div>

      </div>

   </div>

</div>