Historically, the visual order of items on screen was permanently locked to their physical position inside the raw HTML code document. If "Div 1" came first in the code, it showed up first on screen.
Flexbox shattered this limitation! Using Bootstrap's order utilities, you can effortlessly disconnect the visual layout order from the raw HTML structure, dynamically swapping blocks around natively using CSS!
Instead of manually moving HTML tags, apply .order-1, .order-2, .order-3, etc. directly to Flex children. The browser immediately regroups them on-screen following the explicit numerical order you provide!
Notice the explicit HTML block order (Blue is first, Green is second, Yellow is third).
The HTML code is exactly identical to above, but CSS order utilities flip them dynamically onscreen!
<div class="d-flex">
<!-- Blue Block was written first natively... -->
<div class="order-3 bg-primary">First HTML Block</div>
<!-- ...but Green Block explicitly jumps to the front of the line! -->
<div class="order-1 bg-success">Second HTML Block</div>
<!-- Yellow Block slides perfectly into the middle spot! -->
<div class="order-2 bg-warning">Third HTML Block</div>
</div>Typically, elements without explicit ordering automatically default internally to order: 0. Instead of painstakingly numbering every single box (from 1 to 50), Bootstrap provides two massive override utilities!
.order-first: Pushes the element to the absolute front of the queue by applying `order: -1`!.order-last: Shoves the element natively to the absolute very back of the line behind all standard elements by applying `order: 6`!The middle blocks don't even have order numbers applied! The first and last blocks easily jump them intelligently.
<!-- The first block skips entirely to the end. The final block snaps rigidly to the front! -->
<div class="d-flex">
<div class="order-last">Written 1st</div>
<div>Written 2nd</div>
<div>Written 3rd</div>
<div class="order-first">Written 4th</div>
</div>Why do we utilize Flex Order? The most prominent reason is Responsive Design! Imagine you have a beautiful image on the right, and paragraph text on the left. On mobile phones, you want the image to gracefully slide above the text instead of dumping underneath it!
You can achieve this layout safely without duplicating HTML elements by combining breakpoints like .order-first and .order-md-last to intelligently manipulate exactly when elements physically swap positions dynamically based exclusively on the current screen size!