Aligned with Flexbox

by Mike Furlender

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row vertical-align">
    <div class="col-xs-12 col-sm-3 col-sm-push-9">
      <div class="panel panel-default">
        <div class="panel-heading"></div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12"><img src="http://placehold.it/320x240" class="img-responsive img-thumbnail center-block img-rounded"></div>
            <div class="col-xs-12"><img src="http://placehold.it/320x240" class="img-responsive img-thumbnail center-block img-rounded"></div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-9 col-sm-pull-3">
      <div class="panel panel-default">
        <div class="panel-heading"></div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-4">
              <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240">
            </div>

            <div class="col-sm-4">
              <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240">
            </div>
            <div class="col-sm-4">
              <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240">
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading"></div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-2"><img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"></div>
            <div class="col-xs-2"><img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"></div>
            <div...

CSS

.vertical-align  {
  background-color: lightblue;
}

@media (min-width: 768px) {
  .vertical-align {
    display: flex;
    flex-direction: row;
  }
  .vertical-align > [class^="col-"] {
    display: flex;
    flex-wrap: wrap;
  }
  .vertical-align > [class^="col-"] > div {
    flex: 1 auto;
  }
}