Combine-layout: Example A

Using Twitter Bootstrap with 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>using Twitter Bootstrap with combine-layout</small></h2>
    </div>
</div>

<div class="container">
    <ol class="row">
        <li class="col-xs-12 col-md-6 divide-md-lg">
            <div class="jumbotron">
                <h1>Story 1</h1>
                <p>This page shows how the layout of a list of 7 ordered stories succeeds even with blocks of different height.</p>
                <p>The only thing added is a <code>divide-md-lg</code> on the "Story 1" column.</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a></p>
            </div>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
            <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>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
            <div class="media">
                <div class="media-body">
                     <h4 class="media-heading">Story 3</h4>

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

                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus...

CSS

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

.jumbotron {
    margin-bottom: 0;
}

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

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

.row {
  font-size: 0;
  text-align: right;
}
.row > * {
  font-size: 1.4rem;
  text-align: left;
  /*
    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;
  }
}
@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;
  }
}