Combine-layout: Example B

Twitter Bootstrap w/ combine-layout

by phloe

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="page-header">
    <div class="container">
         <h1>Combine-layout: Example B</h1>
        <h2><small>Twitter Bootstrap w/ combine-layout</small></h2>

    </div>
</div>
<div class="container">
    <ol class="row">
        <li class="col-sm-12 col-lg-8 break-sm-lg">
            <div class="jumbotron">
                 <h2>Story 1</h2>

                <p>Integer dui massa, pellentesque non hendrerit viverra, imperdiet a diam. Nam sit amet blandit diam.</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a>
                </p>
            </div>
        </li>
        <li class="col-sm-6 col-md-4">
            <div class="media">
                <div class="media-body">
                     <h4>Story 2</h4>

                    <p>Donec sit amet convallis urna.</p>
                    <p><a href="#" role="button">Read more</a>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-6 col-md-4 break-sm break-lg">
            <div class="media">
                <div class="media-body">
                     <h4>Story 3</h4>

                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    <p><a href="#" role="button">Read more</a>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-12 col-md-8 break-md divide-lg">
            <div class="media">
                <div class="media-body">
                     <h4>Story 4</h4>

                    <p>Fusce tempor, nisi id tincidunt rhoncus, massa diam ornare nisl, id imperdiet nunc nisi a magna.</p>
                    <p><a href="#" role="button">Read more</a>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-6 col-md-4">
            <div...

CSS

ol.row {
    list-style-type: none;
    padding: 0;
}
.row {
    font-size: 0;
}
.row > * {
    font-size: 1.4rem;
    /*
    can't use 1rem with Bootstrap because
    1rem is 10px (html) while body has
    font-size of 14px...
  */
}
@media (min-width: 480px) and (max-width: 767px) {
    .break-sm + * {
        clear: left;
    }
    .divide-sm ~ * {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
}


.jumbotron {
    margin-bottom: 0;
}

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

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

@media (min-width: 480px) and (max-width: 991px) {
    .break-sm-md + * {
        clear: left;
    }
    .divide-sm-md ~ * {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
}
@media (min-width: 480px) {
    .break-sm-lg + * {
        clear: left;
    }
    .divide-sm-lg ~ * {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .break-md + * {
        clear: left;
    }
    .divide-md ~ * {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
}
@media (min-width: 768px) {
    .break-md-lg + * {
        clear: left;
    }
    .divide-md-lg ~ * {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
}
@media (min-width: 992px) {
    .break-lg + * {
        clear: left;
    }
    .divide-lg ~ * {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
}