Help me bottom align these panels
Tops of A and C.
Bottoms of B and C.
Without flexbox, javascript, or breaking responsiveness!
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 toprow">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<div class="panel panel-default">
<div class="panel-heading">Panel C</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">Panel A</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">Panel B</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>
...
CSS
.toprow {
background-color: lightblue;
}