I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an offset. Surprisingly, they both end up looking exactly the same.
<div class="row">
<div class="col-md-2">
<h2>Column 1</h2>
<p>
This is text for column 1
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-2">
<h2>Column 2</h2>
<p>This is text for column 2</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-2 col-md-push-6">
<h2>Column 3</h2>
<p>This is text for column 3</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h2>Column 1</h2>
<p>
This is text for column 1
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-2">
<h2>Column 2</h2>
<p>This is text for column 2</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-2 col-md-offset-6">
<h2>Column 3</h2>
<p>This is text for column 3</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>