SOURCE

<div class="container">
  <h1>
    Hello, world!
  </h1>
  <div class="row">
    <div  style="background-color:pink" class="col-md-12 col-sm-12">
    <h1 style="text-align:center;">
    布局
  </h1>
    <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>
        第一列
      </h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>
        第二列 - 分为四个盒子
      </h4>
      <div class="row">
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim
            organic quis.
          </p>
        </div>
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
          </p>
        </div>
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
          </p>
      </div>
    </div>
  </div>
  <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>
        第三列
      </h4>
      <p>
        This is a template for a simple marketing or informational website. 
      </p>
    </div>
  </div>
   <div  style="background-color:pink" class="col-md-12 col-sm-12">
    <p style="text-align:center;">Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
  </div>
  </div>
  <div  style="background-color:orange" class="col-md-3 col-sm-3 col-xs-offset-6 ">
 This is some text!
  </div>