Bootstrap 3 complex layout

http://stackoverflow.com/questions/38574076/

by Gleb Kemarsky

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-8">1</div>
    <div class="col-sm-4 pull-sm-right">
      <div class="row">
        <div class="col-xs-12">2</div>
        <div class="col-xs-6 col-sm-12">3</div>
        <div class="col-xs-6 col-sm-12">4</div>
        <div class="col-xs-12">7</div>
      </div>
    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-xs-6">5</div>
        <div class="col-xs-6">6</div>
      </div>
    </div>
  </div>
</div>

CSS

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

/* Decorations */
.col-sm-8:first-child              { background: #9c6; min-height: 300px; }
.col-xs-12                         { background: #ff0; min-height:  70px; }
.col-xs-6:nth-of-type(1)           { background: #f93; min-height: 100px; }
.col-xs-6:nth-of-type(2)           { background: #69c; min-height: 100px; }
.col-xs-6.col-sm-12:nth-of-type(2) { background: #69c; min-height: 150px; }
.col-xs-6.col-sm-12:nth-of-type(3) { background: #f93; min-height: 150px; }
.col-sm-8:first-child,
.col-xs-12,
.col-xs-6 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}