In Section 4 of our Mastering Flexbox assortment, we showed you one of the best ways to align content material subject matter without hidden spacers or custom designed CSS by way of the usage of Justify Content material subject matter, Align Items, Increase To Fill, Module Teams, and Nested Modules.
Now it’s time to resolve each different no longer strange responsive construction drawback: mobile stacking order. On desktop, a fancy construction can look polished and intentional. But when that exact same construction stacks on mobile, the default order may not create the most productive finding out go with the flow. Footage can stack above the mistaken text, key CTAs can appear too low, featured enjoying playing cards can lose priority, and all of the rhythm can in reality really feel off.
Divi 5’s Flexbox Structure Device offers you visual controls for reordering content material subject matter all the way through breakpoints. With Display Order, and in some circumstances Wrap Reverse, you’ll make stronger the mobile experience inside the Visual Builder without duplicating sections or writing custom designed CSS for no longer strange reordering patterns.
In this segment, you’ll learn how to restore no longer strange mobile stacking problems, create additional intentional mobile-first flows, and maintain stronger visual hierarchy all the way through breakpoints.
Let’s dive in.
Why Cellular Reordering Problems
On desktop, sparsely designed layouts ceaselessly rely on side-by-side relationships. Footage and text exchange, supporting content material subject matter sits beside key messages, and featured portions are situated for visual balance.
On mobile, those same portions most often stack vertically. Divi follows the provision order of the construction, so the phase that appears first inside the building most often turns out first on smaller screens. That can create issues very similar to:
- Footage stacking above other images instead of pairing with their similar text.
- Essential CTAs appearing beneath long sections of supporting content material subject matter.
- Featured enjoying playing cards appearing after a lot much less vital enjoying playing cards.
- Cellular layouts that in reality really feel visually disconnected from the desktop design.
The ones issues affect more than aesthetics. Poor mobile ordering may make a internet web page more difficult to scan, slow down decision-making, and push vital actions farther down the show. Visitors on phones want a logical go with the flow that items one of the comparable information on the correct 2d.
Divi 5 lets you correct the ones issues of out rising reproduction sections for mobile. With Flexbox ordering controls, you’ll alter the mobile experience while keeping up one cleaner construction building.
Core Reordering Choices In Divi 5
Divi 5 offers you a few vital apparatus for controlling content material subject matter order all the way through breakpoints. The main one is Display Order. Wrap Reverse can also be in agreement particularly wrapped layouts, specifically when you wish to have to change how wrapped traces stack.
Display Order
The principle software for reordering content material subject matter is Display Order, situated inside the Content material subject matter tab beneath the Order chance workforce. You’ll be capable of use it on flex items very similar to columns, modules, rows, and Module Teams, depending on the father or mom construction context.
Lower numbers appear earlier inside the visual order, while higher numbers appear later. The default worth is 0. You’ll be capable of use harmful numbers, very similar to -1, to tug an element earlier, or certain numbers to move an element later inside the visual order.
Most often, alter Display Order at the Tablet and Phone breakpoints while leaving Desktop at its default provide order. This assists in keeping your desktop building easier to maintain while supplying you with targeted control on smaller screens.
Wrap Reverse
Wrap Reverse turns out to be useful when operating with wrapped content material subject matter. As a substitute of new flex traces stacking inside the usual cross-axis trail, Wrap Reverse places wrapped traces in the wrong way. This doesn’t exchange Display Order for actual item-by-item reordering, alternatively it would be in agreement with sure responsive patterns where a whole wrapped line should switch visually.
Cellular Reordering Examples
Beneath are six examples that show one of the best ways to transparent up no longer strange mobile stacking problems the usage of Divi 5’s Flexbox reordering controls. Every example explains the desktop objective, the mobile issue, and the targeted adjustment that improves the mobile go with the flow.
1. Hero Section
Objective: Create a antique two-column hero construction with an image on the left and the headline, description, and CTAs at the correct on desktop, while making sure the main message turns out first on mobile.
The Problem On Cellular: By way of default, Divi stacks columns in step with their provide order. If the image column comes first, mobile visitors may see a large image forward of they see the headline, supporting text, or CTA buttons. This delays the internet web page’s main message.
The Answer: Use Display Order to set the content material subject matter column to -1 at the Phone breakpoint. This pulls the content material subject matter column above the image on mobile while leaving the desktop construction unchanged.
Why Put Content material subject matter Above The Image On Cellular?
On phones, area is limited and consumers scan in brief. Showing the heading and value proposition first helps visitors understand the internet web page forward of they make a decision to scrolling. Putting CTA buttons higher can also make the next movement easier to look out.
Objective: Create a four-column footer on desktop, very similar to Company, Products, Belongings, and Contact & Beef up, while making sure the Contact column turns out higher on mobile.
The Problem On Cellular: When footer columns stack on smaller screens, the Contact & Beef up column may after all finally end up final. This may power mobile consumers to scroll through a lot much less urgent link groups forward of accomplishing phone numbers, email links, or fortify alternatives.
The Answer: Allow Structure Wrapping > Wrap on Tablet. Then, on the Phone breakpoint, switch to Wrap Reverse. This changes how the wrapped columns stack, allowing the final column to move higher inside the mobile go with the flow without manually assigning Display Order values to each and every column.
Why Use Wrap Reverse Proper right here?
Wrap Reverse turns out to be useful when the main issue is line-level stacking quite than actual explicit individual ordering. For footers, it can be a low-maintenance approach to ship later columns, very similar to contact details, higher on smaller screens while keeping up the desktop footer building intact.
3. Alternating Image-Text Rows
Objective: Deal with an alternating construction on desktop, very similar to image left/text correct followed by way of text left/image correct, while making a relentless mobile go with the flow.
The Problem On Cellular: With alternating rows, the default stacking behavior can create inconsistent mobile sequences. The principle row may stack image first, while the second row stacks text first because of its desktop provide order is reversed. This may make the mobile construction in reality really feel uneven.
The Answer: On the second row, set the image column’s Display Order to -1 at the Phone breakpoint. This pulls the image above the text on mobile while keeping up the desktop alternating construction unchanged.
Why Put The Image Above Text On Cellular?
For supporting content material subject matter sections, images can act as visual anchors that introduce each topic. A relentless image-first construction may make repeated sections easier to scan. This is different from a hero phase, where the headline and CTA most often deserve priority.
4. Featured Card Grid
Objective: Create a balanced three-column card grid on desktop with a featured card inside the center, while making sure the featured card turns out first on mobile.
The Problem On Cellular: On desktop, the featured card may sit down inside the center for visual balance. When the columns stack on mobile, the main card inside the provide order turns out first, pushing the featured card into the second position.
The Answer: Set the middle column, which comprises the featured card, to Display Order > -1 at the Tablet and Phone breakpoints. This moves the featured card to the very best of the mobile stack while keeping up the desktop grid unchanged.
Why Put The Featured Card First On Cellular?
On mobile, consumers see one card at a time. If one card highlights a key offer, main receive advantages, or most vital chance, striking it first supplies it immediate visibility and is helping a clearer hierarchy.
5. Sidebar Structure
Objective: Create a two-column construction with main content material subject matter on the left and a sidebar at the correct on desktop, while making sure high-value sidebar content material subject matter turns out earlier on mobile.
The Problem On Cellular: By way of default, Divi stacks columns in provide order. If the main content material subject matter column turns out first, the sidebar may be pushed far down the mobile internet web page, even supposing it comprises vital CTAs, bureaucracy, or opt-ins.
The Answer: Set the sidebar column’s Display Order to -1 at the Tablet and Phone breakpoints. This moves the sidebar above the main content material subject matter on smaller screens. Throughout the sidebar, set the email opt-in Module Staff to Display Order > -1 so it kind of feels that at the top of the sidebar content material subject matter.
Why Put The Sidebar First On Cellular?
Sidebars ceaselessly come with high-value actions, very similar to publication signups, contact bureaucracy, or promotional CTAs. Shifting the sidebar higher may make those actions additional visible forward of shoppers scroll through a longer article or internet web page.
Why Switch The E-mail Come to a decision-In To The Highest Of The Sidebar?
The email opt-in is ceaselessly one of the crucial vital actions in a sidebar. Shifting it to the very best creates an earlier choice for engagement while holding the desktop construction.
6. Title To Movement + Blurbs
Objective: Create a bit of with a headline row, 3 serve as blurbs, and a outstanding button workforce on desktop, while bringing the CTA buttons higher on mobile.
The Problem On Cellular: If Divi stacks rows in provide order, consumers see the headline, then the blurbs, and most straightforward then succeed in the CTA buttons. On mobile, it’s going to place the primary movement too far down the internet web page.
The Answer: Use Display Order at the row level instead of most straightforward at the column level. For mobile, reorder the three rows like this:
- Row 1, Headline + copy: Display Order > 0
- Row 3, Buttons: Display Order > 0
- Row 2, Blurbs: Display Order > 1
This moves the button row immediately after the headline on mobile without changing the desktop construction.
Why This Works
For conversion-focused sections, consumers should see the primary movement early. Shifting the buttons immediately after the headline supplies mobile visitors a clearer path to movement, while the blurbs however provide supporting information shortly.
Step-By way of-Step Assemble Walkthrough
Now that you just’ve noticed how Display Order and Wrap Reverse can make stronger mobile layouts, let’s assemble a simple three-column phase. On Desktop, the columns sit down side by way of side. On Tablet, the CTA moves higher. On Phone, you’ll make a selection the order that very best is helping the content material subject matter hierarchy.
Step 1: Create The Desktop Structure
Add a three-column row to a internet web page inside the Visual Builder. Set the Vertical Hollow and Horizontal Hollow to 25px, then pass away the rest construction settings at their defaults till your design needs additional adjustments.
Add an image to the left column, supporting text to the middle column, and a CTA to the third column.
Step 2: Regulate Column Classes On Tablet
At the top of the builder, click on at the Tablet icon inside the Responsive Breakpoint switcher. Any settings you change from this point forward apply to the Tablet breakpoint, while the Desktop construction remains unchanged.
Next, alter the collection of columns confirmed at the Tablet breakpoint. Open each column and assign a Column Class, very similar to 1/2 for the main two columns and Fullwidth for the third column.
Step 3: Allow Structure Wrapping
Next, permit Structure Wrapping at the Tablet breakpoint. Without wrapping, the Column Class settings may not spoil into multiple traces as expected when the available width changes.
Throughout the row’s Design tab, open the Structure chance workforce and set Structure Wrapping to Wrap. This allows the columns to move onto additional traces.
Step 4: Set The Display Order
While however on the Tablet breakpoint, make a selection column 3, which comprises the CTA. Throughout the column’s Content material subject matter tab, cross to Order > Display Order and enter -1.
Setting Display Order to -1 pulls the CTA column earlier inside the visual order at the Tablet breakpoint. This gives the verdict to movement higher visibility without changing the desktop provide order.
Step 5: Switch To The Phone Breakpoint
After making changes at the Tablet breakpoint, switch to the Phone breakpoint.
Analysis how the phase stacks on Phone. Divi 5’s responsive controls mean you can make additional Phone-specific adjustments when the easiest mobile order differs from Tablet.
If you wish to have the image to look first on Phone while keeping up the CTA higher on Tablet, alter the third column, the CTA column, to Display Order > 2 at the Phone breakpoint.
When you cycle through all breakpoints, each breakpoint displays the CTA inside the order you specified.
Responsive Best possible Practices And Tips
Now that you know the way to reorder content material subject matter with Flexbox in Divi 5, listed here are good tips that will help you use the ones apparatus effectively while keeping up layouts clean and easier to maintain.
Set Display Order Values At The Breakpoint Level
Keep away from changing the order on Desktop till the desktop design particularly requires it. Make most reordering adjustments at the Tablet or Phone breakpoint the usage of Divi’s Customizable Responsive Breakpoints and/or the Responsive Editor. This assists in keeping your desktop construction dominated by way of clean provide order while allowing targeted mobile changes.
Use Hostile Values When Appropriate
When crucial phase, very similar to a featured card or primary CTA, needs to look earlier on mobile, set its Display Order to -1. This is most often cleaner than assigning huge certain numbers to each and every other products. Hostile values clearly mark the article that should switch earlier.
Most straightforward Reorder Portions That Need It
Every flex products starts with the identical default order worth. You most often most straightforward need to alter the items you wish to have to move. Reordering each and every column creates useless maintenance art work and makes long run troubleshooting more difficult.
Reorder Based totally completely On Content material subject matter Hierarchy, No longer Merely Glance
Essentially the most robust explanation why to change order on mobile is to make stronger the client’s go with the flow all the way through the internet web page. Prioritize key messages, calls to movement, featured enjoying playing cards, opt-ins, or visual anchors according to what the shopper needs to appear first. Every reordering answer should fortify the mobile content material subject matter hierarchy, no longer merely reflect a desktop design construction.
Download The Layouts
To make the workflow easier to find, we’ve created a zipped folder containing the phase layouts used in this publish. The ones are the finished, reordered diversifications, so that you’ll investigate cross-check how Display Order, Structure Wrapping, and Wrap Reverse art work together all the way through breakpoints.
To use them, fill out the form beneath to get right to use the files. Then cross to Divi > Divi Library and click on at the Import & Export button.
Switch to the Import tab, make a selection a JSON file so as to add, and click on on Import Divi Builder Layouts.
Next, create a brand spanking new internet web page or open an present one inside the Visual Builder. Click on at the blue + icon with the intention to upload a brand spanking new phase to the internet web page.
Choose Add From Library, make a selection a construction, and click on on Use This Section.
Unlock Cellular Reordering In Divi 5
You no longer need to reproduction sections or write custom designed CSS for no longer strange mobile reordering patterns. With Divi 5‘s Flexbox ordering controls, you’ll create additional intentional mobile layouts while keeping up the desktop building intact.
In Segment 6 Of Mastering Flexbox: Key Tips For Construction Responsive Layouts, we’ll ship the entire thing at the side of responsive construction strategies, breakpoint-level adjustments, and real-world workflow tips for construction cleaner Divi 5 layouts.
Obtain Divi 5, import the example layouts, and get began experimenting with mobile reordering. Drop a statement beneath and let us know which reordering technique you came upon most precious.
The publish Section 5 Of Mastering Flexbox: Reordering Content material For Higher Cell Layouts appeared first on Sublime Issues Weblog.
0 Comments