This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)
...or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
Dein Titel Kommt Hierhin
Dein Inhalt kommt hierhin. Bearbeite oder entferne diesen Text inline oder in den Inhalteinstellungen des Moduls. Du kannst außerdem jeden Aspekt dieses Inhalts in den Designeinstellungen des Moduls gestalten und sogar benutzerdefiniertes CSS auf diesen Text in den Erweitert-Einstellungen des Moduls anwenden.
Design
Redefined
We craft refined, modern experiences that balance aesthetics with purpose, turning ideas into interfaces that are clear, engaging, and built to perform.
Design
Discover premium electronics designed for performance, precision, and modern living.
Build
Launch
Perform
Explore powerful computing solutions and thoughtfully curated tech built for efficiency and style.
Reordering Content For Better Mobile Layouts
Three rows of image–text pairs look elegant on desktop, but when they stack, rows 1 and 3 put images first while row 2 puts text first — breaking the visual rhythm. Flexbox order fixes row 2.
Consistent visual flow starts with the right default
When your image is already on the left on desktop, stacking on mobile naturally places it first — which is exactly where you want it. No Flexbox intervention required for this row.
Think of this as your baseline. Rows 1 and 3 follow this pattern, so they behave correctly on mobile without any extra configuration in Divi 5's Flexbox order panel.
The reversed row: text left, image right
This row flips the pattern for visual variety on desktop. But on mobile, the natural stack puts this text above the image — breaking the image-first rhythm that visitors expect. Skimmers see a wall of text before they see anything visual.
Mobile stacking problem: Without reordering, text lands on top here. The solution is to set the image column's Flexbox order to -1 (or 0) on the mobile breakpoint in Divi 5, pulling it above the text in the stacked layout.
Back to the original rhythm for consistency
Row 3 mirrors Row 1. The image is already on the left, so when mobile stacking kicks in, it lands on top naturally. Your three-row section now has a consistent image-first flow on every screen size.
With only one row requiring a Flexbox order adjustment, your mobile visitors get a coherent, visually engaging layout — without any CSS overrides or duplicate content.
How to set Display Order per breakpoint in Divi 5
Follow along with this three-column layout — a Feature Image, a Text Block, and a CTA Panel. On desktop they sit side by side. On tablet the CTA moves above everything. On phone the image rises to the top. Each step shows you exactly what to click in Divi 5.
Mobile Optimization
By adopting a mobile-first design approach, you not only cater to your audience's preferences but also improve your search engine rankings, making your content accessible to a wider audience. Focus on mobile optimization to create a welcoming and user-friendly experience that resonates with today's mobile consumers.
Join thousands building websites they love.
Build mobile-first layouts in Divi 5 today
You've seen how Flexbox order transforms five common layout patterns. Now apply it in your own builds — the visual builder makes it effortless.
Divi Visual Builder
MOBILE ORDER 2
Mobile Preview
Mobile order 1 — order: -1
Flexbox Controls
Mobile order 3
When the sidebar should come first on mobile
A desktop sidebar that holds a key call-to-action or contact form gets buried under your main content when the layout stacks. Flexbox order surfaces it to the top where it actually gets seen.
Display order gives you layout control at every breakpoint
In a traditional CSS layout, source order is destiny — whatever comes first in the HTML renders first on screen. With Flexbox, you can decouple visual order from DOM order and serve a different hierarchy to each device.
Divi 5 surfaces this through its Flexbox order panel, letting you set per-breakpoint order values directly in the visual builder — no custom CSS required. Assign a lower value to pull an element up; a higher value pushes it down.
Get a free Divi Layout Pack
12 mobile-optimised section templates with Flexbox order pre-configured for every breakpoint.
In this series
Part 1 – Flexbox fundamentals
Part 2 – Flex containers and items
Part 3 – Alignment and justify
Part 4 – Wrapping and gap
Part 5 – Reordering content ← you are here