Bootstrap 3 grids: column under column inside one row

css, multiple-columns, twitter-bootstrap

Solution

This is how you should have done it, by nesting the Panel 2-2 under Panel 2 instead of letting it lie at the end, which is not what you'll want. Here's the Bootply:http://bootply.com/102721

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 class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">Panel 2-2 (under panel 2)</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="panel panel-default">
            <div class="panel-body">Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>Panel 3 (right)
                <br>
            </div>
        </div>
    </div>
</div>

Demo

Problem

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?

Original source