Column Ordering

In Bootstrap 4, column ordering allows you to change the order of columns on different screen sizes using the grid system's responsive classes. This feature is useful when you want to adjust the layout for various devices without changing the HTML structure.

Here’s a basic explanation and some examples to illustrate how column ordering works:

Basic Concept

Bootstrap's grid system uses a series of containers, rows, and columns to lay out and align content. By default, columns are displayed in the order they appear in the HTML. However, you can use Bootstrap's responsive utility classes to reorder columns for different screen sizes.

Classes for Column Ordering

Bootstrap 4 provides several classes to change the order of columns:

• .order-{breakpoint}-{value}: This class changes the order of the column on the specified breakpoint.
  • {breakpoint} can be sm, md, lg, or xl.
  • {value} is a number between 1 and 12, where a lower number appears first.

Examples

1. Default Ordering

   <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".

2. 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".

3. 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".

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.