SO equal height columns with wells

by panchroma

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>
</div><!-- end span 4-->
    
<div class="span4 col well">
<p>middle column</p>
</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>
</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; 
}