SO equal height columns with wells

by Kyle Mitofsky

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 class='absolute span4'>Title or Caption</h2>
            <h2 class='relative'>Title or Caption</h2>
        </div>
        <div class="span4 col well">
            <p>middle column</p>
            <h2 class='absolute span4'>Title or Caption</h2>
            <h2 class='relative'>Title or Caption</h2>
        </div>
        <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 class='absolute span4'>Title or Caption</h2>
            <h2 class='relative'>Title or Caption</h2>
        </div>
     </div>
    <!-- add a second row of wells underneath-->
    <div class="row-fluid base col-wrap">
        <div class="span4 col-base well"></div>
        <div class="span4 col-base well"></div>
        <div class="span4 col-base well"></div>
    </div>
</div>

CSS

@media (min-width: 768px) {
    .col {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }
    .col-base {
        margin-top: -15px;
    }
    .col > h2.absolute{
        position: absolute ;
        bottom: 0;
        margin-left:0;
        padding-right:40px;
    }
    .col > h2.relative{
        visibility:hidden;
    }
}
@media (max-width: 767px) {
    .row-fluid.base {
        display:none;
    }
    .col > h2.absolute{
        display:none;
    }
}
.col-wrap {
    overflow: hidden;
    position: relative;
}