Bootstrap 5 ReOrdering will not work correctly past 4 columns

Question

I have setup a container that should alternate the image & text when the size is md or above. The intention is to have the images above text on small and alternate image, text, text, image etc. As soon as I exceed 4 columns the ordering does not work. Please help advise where I am going wrong?

Working code example 4 columns

<!-- Block 1 Re order order-* from md upwards -->
  <div class="container">
    <div class="row">
      <div class="col-md-6 order-md-1 odd-row">
        <img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System">
      </div>

      <div class="col-md-6 order-md-2 even-row">
        <h1 class="font-weight-light">Is your home insurance proof?</h1>
        <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
      </div>

      <div class="col-md-6 order-md-4 odd-row">
        <div class="col-lg-4"><img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System"></div>
      </div>

      <div class="col-md-6 order-md-3 even-row">
        <h1 class="font-weight-light">Is your home insurance proof?</h1>
        <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
      </div>

    </div>

Above 4 columns when the code/order does not work (breaks).....

<!-- Block 1 Re order order-* from md upwards -->
  <div class="container">
    <div class="row">
      <div class="col-md-6 order-md-1 odd-row">
        <img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System">
      </div>

      <div class="col-md-6 order-md-2 even-row">
        <h1 class="font-weight-light">Is your home insurance proof?</h1>
        <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
      </div>

      <div class="col-md-6 order-md-4 odd-row">
        <div class="col-lg-4"><img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System"></div>
      </div>

      <div class="col-md-6 order-md-3 even-row">
        <h1 class="font-weight-light">Is your home insurance proof?</h1>
        <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
      </div>

      <div class="col-md-6 order-md-5 odd-row">
        <img class="img-fluid rounded mb-4 mb-lg-0" src="images/security_alarm.png" alt="Security Alarm System">
      </div>

      <div class="col-md-6 order-md-6 even-row">
        <h1 class="font-weight-light">Is your home insurance proof?</h1>
        <p>Most insurance companies now ask that you upgrade the security of your home to qualify for home insurance. Did you know you must have kite marked locks on the front and back doors to qualify for a valid claim? </p>
      </div>

    </div>

score 0 · Accepted Answer · answered Dec 31 '22 at 22:11

Your problem

The .order-* classes are limited at 5. It's in the documentation:

Includes support for 1 through 5 across all six grid tiers. If you need more .order-* classes, you can modify the default number via Sass variable.

And .order-6 is equal to order: last.

Easy solution

Add your own CSS classes.

@media (min-width: 768px) {
  .order-md-6 {
   order: 6;
  }
  .order-md-7 {
   order: 7;
  }
  .order-md-8 {
   order: 8;
  }
  .order-md-9 {
   order: 9;
  }
  .order-md-10 {
   order: 10;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6 order-md-1">
    img
    </div>
    <div class="col-md-6 order-md-2">
    text
    </div>
    <div class="col-md-6 order-md-4">
    img
    </div>
    <div class="col-md-6 order-md-3">
    text
    </div>
    <div class="col-md-6 order-md-5">
    img
    </div>
    <div class="col-md-6 order-md-6">
    text
    </div>
    <div class="col-md-6 order-md-8">
    img
    </div>
    <div class="col-md-6 order-md-7">
    text
    </div>
    <div class="col-md-6 order-md-9">
    img
    </div>
    <div class="col-md-6 order-md-10">
    text
    </div>
  </div>
</div>

Alternative solution

Overwrite the Sass. It can be found in the _utilities.scss. Here it is in Github. If you don't know how to do this, there are many tutorials to get you started, even here on SO.

So it does, I didn't spot that despite reading it earlier to learn how to order. Thank you. — Sandy, Jan 01 '23 at 20:26
@Sandy You're welcome! It's easy to overlook, indeed. If you liked my answer please hit "Accept". Thanks! — Cooleronie, Jan 02 '23 at 00:20

Bootstrap 5 ReOrdering will not work correctly past 4 columns

1 Answers1