Bootstrap 3 grids: column under column inside one row

Viewed 9024

I have following HTML code:

<div class="row">
<div class="col-lg-3">
 <div class="panel panel-default">
  <div class="panel-body">
    Panel 1 (left)
    </div>
  </div>
</div> 

<div class="col-lg-6">
 <div class="panel panel-default">
  <div class="panel-body">
    Panel 2 (center)
    </div>
   </div>
 </div>
</div>

<div class="col-lg-3">
 <div class="panel panel-default">
  <div class="panel-body">
    Panel 3 (right)
    </div>
   </div>
 </div>
</div>

</div>

<div class="row">
<div class="col-lg-3">
 <div class="panel panel-default">
  <div class="panel-body">
    Panel 2-2 (under panel 2)
    </div>
  </div>
</div>
</div> 

Final result should look like this:
And it works, but if panel 3 have bigger height than panel 1 or 2 I get this:

How can I fix it?

1 Answers
Related