Push and Pull column in Bootstrap

In Bootstrap , we can use the push and pull classes to reorder columns in a responsive layout. These classes allow you to change the order of your columns on different screen sizes without changing the HTML structure. Here’s how you can use the push and pull classes in Bootstrap:
Push and Pull Columns in Bootstrap 3:

1. Pushing Columns:
   The push classes in Bootstrap allow you to push columns to the right. For example, if you want to push a column one position to the right on medium-sized screens (md), you can use the col-md-push-* class:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">Column 1</div>
        <div class="col-md-8 col-md-pull-4">Column 2</div>
    </div>
</div>

In this example, Column 1 will be pushed to the right by 4 columns on medium-sized screens.

2. Pulling Columns:
   The pull classes in Bootstrap allow you to pull columns to the left. For example, if you want to pull a column one position to the left on medium-sized screens (md), you can use the col-md-pull-* class:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">Column 1</div>
        <div class="col-md-8 col-md-pull-4">Column 2</div>
    </div>
</div>

In this example, Column 2 will be pulled to the left by 4 columns on medium-sized screens.