javascripttwitter-bootstrap

Bootstrap two rows on the left and one on the right

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

enter image description here

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):

enter image description here

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>
Solution

  • 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>