Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div>
    <div class="reorder-sm">
      <div id="b" class="col-md-5 col-sm-12 col-xs-12">B</div>
      <div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div>
    </div>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
div{
  height:20px;
  color:white;
}
.container{
  margin-top:50px;
}
#a{
  background-color:red;
}
#b{
  background-color:blue;
}
#c{
  background-color:green;
}
@media (max-width: 991px) {
  .reorder-sm {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

    direction: rtl;
  }

  .reorder-sm > [class*="col-"] {
    -webkit-transform: rotate(-180deg) translate(0,300%);
    -moz-transform: rotate(-180deg) translate(0,300%);
    -ms-transform: rotate(-180deg) translate(0,300%);
    -o-transform: rotate(-180deg) translate(0,300%);
    transform: rotate(-180deg) translate(0,300%);

    direction: ltr;
  }
}