Skip to content

Using flex to change element display order

Here’s a dead simple trick for creating alternating boxes (flipping the order of element display) in CSS with display: flex. Each pair of boxes is wrapped in a div with flex applied. We can then select every odd wrapper and change the order of the content.

.inner:nth-child(odd) {
 .box--box1 {
   order: 1;
 }
}
Screenshot of boxes before ordering
Before order
Screenshot of alternating boxes
After ordering

See the it in action at CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *