Combine-layout: Example A

Nested rows/columns using Twitter Bootstrap without combine-layout

by phloe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="page-header">
    <div class="container">
        <h1>Combine-layout: Example A</h1><h2><small>Nested rows/columns using Twitter Bootstrap without combine-layout</small></h2>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <div class="row">
                <div class="col-xs-12">
                    <div class="jumbotron">
                        <h1>Story 1</h1>
                        <p>This page shows how the layout of a list of 7 ordered stories fails with blocks of different height (which would be unavoidable in responsive designs).</p>
                        <p>Note how "Story 4" gets caught in the corner created by "Story 2" and the shorter "Story 3" at some viewport sizes.</p>
                        <p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-lg-4">
                    <div class="media">
                        <div class="media-body">
                             <h4 class="media-heading">Story 2</h4>
        
                            <p>Integer dui massa, pellentesque non hendrerit viverra, imperdiet a diam. Nam sit amet blandit diam. Integer scelerisque mauris sit amet arcu lacinia, nec lobortis lorem ultrices.</p>
                            <p><a href="#" role="button">Read more</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-4">
                    <div class="media">
                        <div class="media-body">
                             <h4 class="media-heading">Story 3</h4>
        
                            <p>Donec sit amet...

CSS

ol.row {
    list-style-type: none;
    padding: 0;
}

.jumbotron {
    margin-bottom: 0;
}

.media {
    background-color: #F8F8F8;
    padding: 10px;
}

.row > * {
    margin-bottom: 20px;
}