SO equal height columns with wells

by ProfitGuider

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<div class="container-fluid">
    <!-- top row of wells or rounded corner divs -->
    <div class="row-fluid col-wrap">
        <div class="span4 col well">
            <p>left column</p>
            <p>left column</p>
            <p>left column</p>
             <h2>Title or Caption</h2>

        </div>
        <!-- end span 4-->
        <div class="span4 col well">
            <p>middle column</p>
             <h2>Title or Caption</h2>
        </div>
        <!--end span4-->
        <div class="span4 col well">
            <p>right column</p>
            <p>right column</p>
            <p>right column</p>
            <p>right column</p>
            <p>right column</p>
             <h2>Title or Caption</h2>
        </div>
        <!-- end span 4-->
    </div>
    <!-- end row-fluid -->
    <div class="row-fluid base col-wrap">
        <!-- add a second row of wells or rounded corner divs immeadiately underneath-->
        <div class="span4 col-base well"></div>
        <div class="span4 col-base well"></div>
        <div class="span4 col-base well"></div>
    </div>
    <!-- close row -->
</div>

CSS

@media (min-width: 768px) {
    /* top row */
    .col {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }
    /* bottom row */
    .col-base {
        margin-top: -15px;
        /* cut off top portion of bottom wells */
    }
}
@media (max-width: 767px) {
    .row-fluid.base {
        display:none;
    }
}
.col-wrap {
    overflow: hidden;
}