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