Setting up the page grid using push and pull

I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below?

This is what I've got so far,

<div class="row">
   <div class="col-xs-5 col-sm-3 col-md-3">A</div>
   <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div>
   <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div>
</div>

1. Make sure you don't add a period (.) inside of the class attribute.

2. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow.

So you can do it like this:

<!-- language: lang-html -->

<div class="row">
  <div class="col-xs-5  col-sm-3  col-md-3"              >A</div>
  <div class="col-xs-7  col-sm-9  col-md-2 col-md-push-7">B</div>
  <div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2">C</div>
</div>

Demo in Stack Snippets:

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

.green  { background: #A3D7C3; }
.red    { background: #EF453A; }
.yellow { background: #FDBE2D; }

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">

  <h2> Normal </h2>
  <div class="row">
    <div class="col-xs-5  col-sm-3  col-md-3 green">A</div>
    <div class="col-xs-7  col-sm-9  col-md-2 red">B</div>
    <div class="col-xs-12 col-sm-12 col-md-7 yellow">C</div>
  </div>
  
  <h2> Push / Pull </h2>
  <div class="row">
    <div class="col-xs-5  col-sm-3  col-md-3               green">A</div>
    <div class="col-xs-7  col-sm-9  col-md-2 col-md-push-7 red">B</div>
    <div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2 yellow">C</div>
  </div>

</div>

<!-- end snippet -->