I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?

In Bootstrap 3, I'm using it like this:

<link href=".4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?

In Bootstrap 3, I'm using it like this:

<link href="https://stackpath.bootstrapcdn./bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

I tried. But I can't. Here is my JSFiddle

In Bootstrap V5, how can I use push and pull? Please help.

Thanks in advance.

• javascript
• html
• twitter-bootstrap
• bootstrap-5

1 Answer 1

Push/pull is a grid technique. That's now deprecated in favour of flex. For flex the helper classes are .order-. See BS5 Columns documentation.

You can use global ordering:

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.

If you just want to shift, then use Offsetting Columns

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

EDIT:

In your case you can use:

<div class="row">
  <div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
  <div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>

or:

<div class="row">
  <div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
  <div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>