Alternating Repeater Layout On Oxygen Builder

Published: 8 months ago

A recurring requisition about Oxygen Builder repeaters is how to how alternate layouts. This is a relatively simple thing to do with some basic CSS.

.container:nth-child(2n) { flex-direction: row-reverse; }

How and why does this work?

Assuming you are using columns to layout your contents in a side by side manner (like above), they are using flexbox. Flexbox has a nice property called flex-direction:row-reverse, which does exactly what it sounds like... It reverses your row order.

With the repeater, apply a custom class to the div within. Then, use the code above to specify that every even child (that's what 2n means) as the row reverse applied to it. You can specify different child elements (ie 3n, 4n) to spice it up.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
6 months ago

Can you be more specific? I'm a novice and I'm not sure how to implement this. A full example would be awesome!

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.


A relationship driven website creation company.


© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram