Bootstrap - How do I have a column flow over multiple rows

I am trying to create a layout shown below:

    C1 C2 C3
    C4 C5 C3
    C6 C7 C3

I am having trouble trying to have a column fill the height of all three rows. This is the code I have tried.

<div class="container">
    <div class="row equal">
        <div class="col-sm-6 lgImage">

        </div>
    </div>
</div>

<div class="container">
  <div class="row equal">
    <div class="col-sm-3">
    Location:
    </div>
    <div class="col-sm-3">
    Placeholder
    </div>
  </div>

  <div class="row equal">
    <div class="col-sm-3">
     No. of Frames:
    </div>
    <div class="col-sm-3">
    Placeholder
    </div>
  </div>

  <div class="row equal">
    <div class="col-sm-3">
     More Info:
    </div>
    <div class="col-sm-3">
    Placeholder
    </div>
  </div>
</div>

with this css:

.lgImage {
    background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
    right: 0;
    position: absolute;
}

This code doesn't work