Push and Pull

Push and pull classes let you change the visual order of columns without changing the HTML order. This is especially useful for responsive layouts.

How Push and Pull Work

• col-md-push-* — pushes a column to the right
• col-md-pull-* — pulls a column to the left

Basic Example

<!-- HTML order: sidebar first, content second -->
<!-- Visual order: content first, sidebar second -->
<div class="row">
    <div class="col-md-4 col-md-push-8">
        Sidebar (appears on the right)
    </div>
    <div class="col-md-8 col-md-pull-4">
        Main content (appears on the left)
    </div>
</div>

Why Use Push and Pull?

For SEO and accessibility, you might want your main content to appear first in the HTML, but visually display the sidebar on the left:

<div class="row">
    <!-- Main content first in HTML (better for SEO) -->
    <div class="col-md-9 col-md-push-3">
        <h1>Main Article</h1>
        <p>Important content first in the source...</p>
    </div>
    <!-- Sidebar second in HTML -->
    <div class="col-md-3 col-md-pull-9">
        <h3>Sidebar</h3>
        <ul><li>Link 1</li><li>Link 2</li></ul>
    </div>
</div>

Responsive Reordering

<div class="row">
    <div class="col-sm-6 col-md-4 col-md-push-8">
        A (pushed on medium+)
    </div>
    <div class="col-sm-6 col-md-8 col-md-pull-4">
        B (pulled on medium+)
    </div>
</div>

On mobile, the columns stack in HTML order. On medium screens and above, they swap positions.