Bootstrap Column Ordering

• {breakpoint} can be sm, md, lg, or xl.
• {value} is a number between 1 and 12, where a lower number appears first.

Examples

• Default Column Order

  <div class="container">
      <div class="row">
          <div class="col-4">First</div>
          <div class="col-4">Second</div>
          <div class="col-4">Third</div>
      </div>
  </div>
  

  • On all screen sizes, the order is "First", "Second", "Third".

• Reordering Columns for Medium Screens and Up

  <div class="container">
      <div class="row">
          <div class="col-4 order-md-3">First</div>
          <div class="col-4 order-md-1">Second</div>
          <div class="col-4 order-md-2">Third</div>
      </div>
  </div>
  

  • On screens smaller than md (medium), the order is "First", "Second", "Third".
  • On medium screens and larger, the order changes to "Second", "Third", "First".

• Reordering Columns for Extra Large Screens

  <div class="container">
      <div class="row">
          <div class="col-4 order-xl-3">First</div>
          <div class="col-4 order-xl-1">Second</div>
          <div class="col-4 order-xl-2">Third</div>
      </div>
  </div>
  

  • On screens smaller than xl (extra large), the order is "First", "Second", "Third".
  • On extra large screens, the order changes to "Second", "Third", "First".
• On extra large screens, the order changes to "Second", "Third", "First".

Summary

By using the .order-{breakpoint}-{value} classes, you can control the order of columns based on the screen size, ensuring a responsive layout that adapts to various devices. This approach allows for flexible and dynamic designs without needing to alter the underlying HTML structure.