Bootstrap 3 - Long Right Column - Partial Rows

Question

I'm fairly new to Bootstrap, but not to the 12-grid system, however I'm having problems implementing columns that are longer than their rows.

I've searched for a fair while online but haven't been able to yet find an answer!

I'll attempt to draw up what I'm trying to achieve, if even possible!

Row 1: [----12----]

Row 2: [---9---][3]

Row 3: [3][3][3][_] <-- continued column from above.

The difficulty I'm having comes at the following point:

Row 1, all ok. Row 2, all ok. Row 3, when starting the first column of row three, it's placed much lower and not tucked in, because of the long content in the right hand column.

Hopefully this makes sense, and there's probably a simple solution, however my head now hurts and coffee doesn't have an effect anymore!

Answer 1

Use nesting to solve this: http://getbootstrap.com/css/#grid-nesting

<div class="container">
  <div class="row">
    <div class="col-sm-12"></div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-12"></div>
      </div>
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

See: http://bootply.com/86710