Locate 3 html div in different height 1st on left, 2nd and 3rd on the right

I use bootstrap and want to locate three div’s as shown below.
Could you please give a sample demo that can meet this requirement?
If it is possible, it would be better to use bootstrap.css?
Thanks in advance.

Html:

<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="http://usebootstrap.com/" class="navbar-brand">UseBootstrap</a>
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    </div>
</div>

<!-- Page Content -->
<div class="container">

    <div class="row">
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">AAAAAAAAAAAAAA<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content AAAAAAAA
                </div>
            </div>
        </div>
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">BBBBBBBBBBBBBBBB<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content BBBBBBBBBBB
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">CCCCCCCCCCCCCCCCCCCC<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content CCCCCCCCCCC
                </div>
            </div>
        </div>
        <div class="col-md-6 portfolio-item">
            <div class="panel panel-primary" style="height:325px !important;">
                <div class="panel-heading">
                    <h3 class="panel-title" id="panel-title">DDDDDDDDDDDDDDDDDDD<a href="#panel-title" class="anchorjs-link"><span class="anchorjs-icon"></span></a></h3>
                </div>
                <div>
                    Content DDDDDDDDDDD
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container -->

<!-- Footer -->
<footer>

</footer>


Source: html5

Leave a Reply