Alternating layout
Stacked feature rows where the image and text swap sides each time, so the page zig-zags down instead of repeating one shape.
See it
What it is
An alternating layout is a stack of two-column rows where the image and the copy trade places on every other row, so the eye walks down the page in a zig-zag instead of a straight line. It is the workhorse of SaaS and product marketing pages: one row equals one feature or one benefit, the screenshot proves it, the paragraph explains it, and the side swap keeps three identical-looking rows from blurring together.
Use it when you have three to five things of equal weight to explain and each one deserves a visual. It gives every row a fresh entry point and lets each block be read on its own. In code it is one row component with a reversed flag: flip with flex-direction: row-reverse or with grid column placement on even rows.
Gotcha: flip visually, not in the DOM. If you reorder with the CSS order property, the screen reader and the tab sequence still follow source order, so the page can announce image, text, text, image while showing something else. Keep source order consistent (heading, copy, then image) and let the reversed row handle appearance only. Second gotcha: past four rows it reads like a template, so break the rhythm with a full-bleed band, a testimonial, or a row that goes wide.
Ask AI for it
Build an alternating feature section: four stacked rows, each a two-column layout with a screenshot on one side and a heading plus two sentences of copy plus a text link on the other, sides swapping every row. Use CSS Grid with a 64px column gap and 120px of vertical space between rows, vertically centre the text block against the image, and cap the copy at about 55 characters per line. Do the swap with grid placement on even rows, keeping the DOM order as heading, copy, image everywhere. Below 768px collapse to a single column with text above image on every row.