What is the difference between push and offset under the grid system?

I'm trying to understand the difference between push and offset in Bootstrap grids. For example the only difference between the two rows below is the third column in each. One uses a push and the other uses an offset. However, they both render 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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
    </div>
</div>

Since offset uses margin-left, and push uses left:

• offset will force neighboring columns to move
• push (and pull) will overlap other columns

Here's a visual example: http://www.bootply.com/126557

In your example there are no column 'collisions'. Push and offset appear the same since the neighbouring columns aren't impacted.

.col-md-offset-*: will increase the left margin by * classes

.col-md-push-*/.col-md-pull-*: will change the order the grid columns appear by * classes. Pull will send the column to the left, while push send it to the right.

• Docs for offset
• Docs for push/pull

A offset in bootstrap will offset the left side of the column thus moving it over or "offsetting" something to the right. With the "offset" style you can only offset items to the right. For pushes and pulls you can pull something to the "left or right" or you can push something opposite of pull. Pushing or pulling items is primary used for column ordering.