Primer CSS Flexbox Order

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. 

Primer CSS Flexbox Order classes are used to define the order of the flex items like we can sort them according to our needs. 2nd flex item can be placed first or in whatever place you want.

Primer CSS Flexbox Order: The number used for placement can be increased depending on the flex items number.

• flex-order-1: This class is used to place the flex item on order 1.
• flex-order-2:  This class is used to place the flex item on order 2.
• flex-order-none: This class is used to terminate the ordering system in flexbox order.

Syntax: In this syntax, we will use only one class, other classes can be used as well as a replacement.

<div class="border d-flex">
 <div class="...">...</div>
 <div class="... flex-order-1">...</div>
 <div class="...">...</div>
</div>

Example 1: This example demonstrates the use of Primer CSS Flexbox Order.

Output:

👁 Image

Example 2: This is another example that demonstrates the use of Primer CSS Flexbox Order.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#order