<div class="container">
  
  <h3>入れ子にした例</h3>
  <div class="row">
    <div class="col-sm-9">
      親の1列目<br>
      .col-sm-9
      <div class="row">
        <div class="col-8">
          子の1列目<br>
          .col-8
        </div>
        <div class="col-4">
          子の2列目<br>
          .col-4
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      親の2列目<br>
      .col-sm-3
    </div>
  </div>
  
  <h3>入れ子にしたカラムにたいしてもブレイクポイントごとの設定をした例</h3>
  <div class="row">
    <div class="col-sm-10">
      親の1列目<br>
      .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          子の1列目<br>
          .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          子の2列目<br>
          .col-4 .col-sm-6
        </div>
      </div>
    </div>
    <div class="col-sm-2">
      親の2列目<br>
      .col-sm-3
    </div>
  </div>
</div>

.row > [class*=col] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

.row {
  margin-top: 1rem;
}
h3 {
  margin-top: 1rem;
  font-size: 1.5em;
  text-align: center;
  margin-top: 1em;
}

em {
  font-weight:bold;
  font-style:normal;
  font-size: 1.1em;
}