Bootstrap two rows on the left and one on the right

Question

I want to create something like this using the bootstrap grid system:

But I can't seem to place COLUMN1 and COLUMN2 one after the other without creating a gap between them (due to COLUMN 3's height):

Here is a code sample of what I've tried (I am not allowed to post the full, actual code):

<div class="row">

    <div id="header" class="col-md-4">
        COLUMN 1
    </div>


    <div class="col-md-8" style="background:url('poze/power.jpg'); height:300px">
        COLUMN 3
    </div>
</div>

<div class="row" id="row_cont">

    <div class="col-md-4">
       COLUMN 2
     </div>
...all the rest
</div>

Quentin

Answer 1

I think this is what you need. Click Full Page to see the result.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col-md-4">
      <div style="background:red; height:100px">Column 1</div>
      <div style="background:blue; height:200px">Column 2</div>
    </div>
    <div class="col-md-8" style="background:yellow; height:300px">Column 3</div>
  </div>

Tannie

Answer 2

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col-md-4">
      <div style="background:red; height:100px">Column 1</div>
      <div style="background:blue; height:200px">Column 2</div>
    </div>
    <div class="col-md-8" style="background:yellow; height:300px">Column 3</div>
  </div>

Spastic

In general, code only answers are not appreciated at SO. In this case, there is already a high scoring answer. If you want your answer to add something to this, please add an explanation to it, saying what the code does and what the different approach is. This helps future readers and it helps your answer to get attention. – Enchain