Bootstrap 3 Image gallery with varying heights

This is a simple Bootstrap 3 image gallery with varying image heights to demonstrate how to clear floats using the clearfix helper and visibility utility classes.

by silb3r

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <div class="row myrow">
        <div class="col-xs-6">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta cursus dignissim. Nunc sollicitudin nulla sed ante elementum suscipit. Nullam porta velit ac arcu dignissim ut ornare nisl mattis. Nulla euismod pretium est, at venenatis quam posuere id. Ut quis massa nisl, a dictum augue. Aliquam erat volutpat. Sed pharetra dignissim felis, in varius risus elementum sit amet. Ut id enim interdum elit pellentesque convallis. Suspendisse potenti. In ligula libero, rhoncus hendrerit vestibulum elementum, tempus eu lorem. Suspendisse vitae felis lorem, vel scelerisque velit. Duis consectetur ultricies massa non commodo. Maecenas eu erat eget purus tincidunt blandit. Et</p>
        </div>
        <div class="col-xs-6 rightspan">
            <p>Some text</p>
            <a class="btn btn-info">And a button</a>
        </div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.myrow {
    font-size: 0;
}
.myrow > * {
    float: none;
    display: inline-block;
    font-size: 14px; /* if using LESS it's quicker to just use @font-size-base */
}
.myrow > *:last-child {
    vertical-align: bottom;
}
.myrow p:last-child {
    margin-bottom: 0; /* optional */
}