In Part 4 of our Mastering Flexbox collection, we confirmed you learn how to align content material with out hidden spacers or customized CSS by way of the use of Justify Content material, Align Pieces, Develop To Fill, Module Groups, and Nested Modules.
Now it’s time to unravel any other not unusual responsive structure problem: cellular stacking order. On desktop, a posh structure can glance polished and intentional. But if that very same structure stacks on cellular, the default order won’t create the most productive studying drift. Pictures can stack above the incorrect textual content, key CTAs can seem too low, featured playing cards can lose precedence, and the whole rhythm can really feel off.
Divi 5’s Flexbox Structure Machine will provide you with visible controls for reordering content material throughout breakpoints. With Show Order, and in some instances Wrap Opposite, you’ll strengthen the cellular enjoy within the Visible Builder with out duplicating sections or writing customized CSS for not unusual reordering patterns.
On this phase, you’ll discover ways to repair not unusual cellular stacking issues, create extra intentional mobile-first flows, and take care of more potent visible hierarchy throughout breakpoints.
Let’s dive in.
Why Cellular Reordering Issues
On desktop, in moderation designed layouts incessantly depend on side-by-side relationships. Pictures and textual content change, supporting content material sits beside key messages, and featured components are situated for visible stability.
On cellular, those self same components typically stack vertically. Divi follows the supply order of the structure, so the component that looks first within the construction typically seems first on smaller displays. That may create problems reminiscent of:
- Pictures stacking above different photographs as an alternative of pairing with their similar textual content.
- Necessary CTAs showing beneath lengthy sections of supporting content material.
- Featured playing cards showing after much less essential playing cards.
- Cellular layouts that really feel visually disconnected from the desktop design.
Those problems have an effect on greater than aesthetics. Deficient cellular ordering could make a web page more difficult to scan, decelerate decision-making, and push essential movements farther down the display. Guests on telephones desire a logical drift that gifts essentially the most related knowledge on the proper second.
Divi 5 allows you to right kind those problems with out developing replica sections for cellular. With Flexbox ordering controls, you’ll alter the cellular enjoy whilst protecting one cleaner structure construction.
Core Reordering Options In Divi 5
Divi 5 will provide you with a couple of essential equipment for controlling content material order throughout breakpoints. The principle one is Show Order. Wrap Opposite too can assist in particular wrapped layouts, particularly when you wish to have to modify how wrapped traces stack.
Show Order
The main instrument for reordering content material is Show Order, positioned within the Content material tab underneath the Order possibility staff. You’ll apply it to flex pieces reminiscent of columns, modules, rows, and Module Groups, relying at the dad or mum structure context.
Decrease numbers seem previous within the visible order, whilst upper numbers seem later. The default price is 0. You’ll use adverse numbers, reminiscent of -1, to drag a component previous, or sure numbers to transport a component later within the visible order.
Generally, alter Show Order on the Pill and Telephone breakpoints whilst leaving Desktop at its default supply order. This assists in keeping your desktop construction more uncomplicated to take care of whilst supplying you with centered regulate on smaller displays.
Wrap Opposite
Wrap Opposite comes in handy when operating with wrapped content material. As a substitute of latest flex traces stacking within the customary cross-axis path, Wrap Opposite puts wrapped traces in the wrong way. This doesn’t exchange Show Order for actual item-by-item reordering, however it may assist with positive responsive patterns the place a complete wrapped line must transfer visually.
Cellular Reordering Examples
Underneath are six examples that display learn how to clear up not unusual cellular stacking issues the use of Divi 5’s Flexbox reordering controls. Every instance explains the desktop function, the cellular factor, and the centered adjustment that improves the cellular drift.
1. Hero Phase
Purpose: Create a vintage two-column hero structure with a picture at the left and the headline, description, and CTAs at the proper on desktop, whilst ensuring the primary message seems first on cellular.
The Downside On Cellular: Through default, Divi stacks columns in keeping with their supply order. If the picture column comes first, cellular guests might see a big picture sooner than they see the headline, supporting textual content, or CTA buttons. This delays the web page’s major message.
The Answer: Use Show Order to set the content material column to -1 on the Telephone breakpoint. This pulls the content material column above the picture on cellular whilst leaving the desktop structure unchanged.
Why Put Content material Above The Symbol On Cellular?
On telephones, area is restricted and customers scan briefly. Appearing the heading and worth proposition first is helping guests perceive the web page sooner than they decide to scrolling. Hanging CTA buttons upper too can make the following motion more uncomplicated to seek out.
Purpose: Create a four-column footer on desktop, reminiscent of Corporate, Merchandise, Assets, and Touch & Beef up, whilst ensuring the Touch column seems upper on cellular.
The Downside On Cellular: When footer columns stack on smaller displays, the Touch & Beef up column might finally end up remaining. This will pressure cellular customers to scroll via much less pressing hyperlink teams sooner than attaining telephone numbers, e mail hyperlinks, or make stronger choices.
The Answer: Allow Structure Wrapping > Wrap on Pill. Then, at the Telephone breakpoint, transfer to Wrap Opposite. This adjustments how the wrapped columns stack, permitting the remaining column to transport upper within the cellular drift with out manually assigning Show Order values to each and every column.
Why Use Wrap Opposite Right here?
Wrap Opposite comes in handy when the primary factor is line-level stacking relatively than actual person ordering. For footers, it may be a low-maintenance solution to carry later columns, reminiscent of touch main points, upper on smaller displays whilst protecting the desktop footer construction intact.
3. Alternating Symbol-Textual content Rows
Purpose: Deal with an alternating structure on desktop, reminiscent of picture left/textual content proper adopted by way of textual content left/picture proper, whilst making a constant cellular drift.
The Downside On Cellular: With alternating rows, the default stacking habits can create inconsistent cellular sequences. The primary row might stack picture first, whilst the second one row stacks textual content first as a result of its desktop supply order is reversed. This will make the cellular structure really feel asymmetric.
The Answer: On the second one row, set the picture column’s Show Order to -1 on the Telephone breakpoint. This pulls the picture above the textual content on cellular whilst protecting the desktop alternating structure unchanged.
Why Put The Symbol Above Textual content On Cellular?
For supporting content material sections, photographs can act as visible anchors that introduce each and every matter. A constant image-first trend could make repeated sections more uncomplicated to scan. That is other from a hero segment, the place the headline and CTA typically deserve precedence.
4. Featured Card Grid
Purpose: Create a balanced three-column card grid on desktop with a featured card within the center, whilst ensuring the featured card seems first on cellular.
The Downside On Cellular: On desktop, the featured card might sit down within the heart for visible stability. When the columns stack on cellular, the primary card within the supply order seems first, pushing the featured card into the second one place.
The Answer: Set the center column, which accommodates the featured card, to Show Order > -1 on the Pill and Telephone breakpoints. This strikes the featured card to the highest of the cellular stack whilst protecting the desktop grid unchanged.
Why Put The Featured Card First On Cellular?
On cellular, customers see one card at a time. If one card highlights a key be offering, major receive advantages, or maximum essential possibility, putting it first provides it speedy visibility and helps a clearer hierarchy.
5. Sidebar Structure
Purpose: Create a two-column structure with major content material at the left and a sidebar at the proper on desktop, whilst ensuring high-value sidebar content material seems previous on cellular.
The Downside On Cellular: Through default, Divi stacks columns in supply order. If the primary content material column seems first, the sidebar could also be driven a long way down the cellular web page, although it accommodates essential CTAs, bureaucracy, or opt-ins.
The Answer: Set the sidebar column’s Show Order to -1 on the Pill and Telephone breakpoints. This strikes the sidebar above the primary content material on smaller displays. Throughout the sidebar, set the e mail opt-in Module Team to Show Order > -1 so apparently on the peak of the sidebar content material.
Why Put The Sidebar First On Cellular?
Sidebars incessantly comprise high-value movements, reminiscent of publication signups, touch bureaucracy, or promotional CTAs. Transferring the sidebar upper could make the ones movements extra visual sooner than customers scroll via a protracted article or web page.
Why Transfer The E mail Decide-In To The Most sensible Of The Sidebar?
The e-mail opt-in is incessantly one of the crucial essential movements in a sidebar. Transferring it to the highest creates an previous alternative for engagement whilst maintaining the desktop structure.
6. Name To Motion + Blurbs
Purpose: Create a piece with a headline row, 3 function blurbs, and a distinguished button staff on desktop, whilst bringing the CTA buttons upper on cellular.
The Downside On Cellular: If Divi stacks rows in supply order, customers see the headline, then the blurbs, and best then achieve the CTA buttons. On cellular, it will position the main motion too a long way down the web page.
The Answer: Use Show Order on the row point as an alternative of best on the column point. For cellular, reorder the 3 rows like this:
- Row 1, Headline + reproduction: Show Order > 0
- Row 3, Buttons: Show Order > 0
- Row 2, Blurbs: Show Order > 1
This strikes the button row without delay after the headline on cellular with out converting the desktop structure.
Why This Works
For conversion-focused sections, customers must see the main motion early. Transferring the buttons without delay after the headline provides cellular guests a clearer trail to motion, whilst the blurbs nonetheless supply supporting knowledge in a while.
Step-Through-Step Construct Walkthrough
Now that you simply’ve observed how Show Order and Wrap Opposite can strengthen cellular layouts, let’s construct a easy three-column segment. On Desktop, the columns sit down facet by way of facet. On Pill, the CTA strikes upper. On Telephone, you’ll select the order that best possible helps the content material hierarchy.
Step 1: Create The Desktop Structure
Upload a three-column row to a web page within the Visible Builder. Set the Vertical Hole and Horizontal Hole to 25px, then depart the remainder structure settings at their defaults until your design wishes further changes.
Upload a picture to the left column, supporting textual content to the center column, and a CTA to the 3rd column.
Step 2: Modify Column Categories On Pill
On the peak of the builder, click on the Pill icon within the Responsive Breakpoint switcher. Any settings you convert from this level ahead follow to the Pill breakpoint, whilst the Desktop structure stays unchanged.
Subsequent, alter the selection of columns proven on the Pill breakpoint. Open each and every column and assign a Column Elegance, reminiscent of 1/2 for the primary two columns and Fullwidth for the 3rd column.
Step 3: Allow Structure Wrapping
Subsequent, permit Structure Wrapping on the Pill breakpoint. With out wrapping, the Column Elegance settings won’t destroy into a couple of traces as anticipated when the to be had width adjustments.
Within the row’s Design tab, open the Structure possibility staff and set Structure Wrapping to Wrap. This permits the columns to transport onto further traces.
Step 4: Set The Show Order
Whilst nonetheless at the Pill breakpoint, choose column 3, which accommodates the CTA. Within the column’s Content material tab, cross to Order > Show Order and input -1.
Atmosphere Show Order to -1 pulls the CTA column previous within the visible order on the Pill breakpoint. This provides the decision to motion upper visibility with out converting the desktop supply order.
Step 5: Transfer To The Telephone Breakpoint
After making adjustments on the Pill breakpoint, transfer to the Telephone breakpoint.
Assessment how the segment stacks on Telephone. Divi 5’s responsive controls will let you make further Telephone-specific changes when the perfect cellular order differs from Pill.
If you wish to have the picture to look first on Telephone whilst protecting the CTA upper on Pill, alter the 3rd column, the CTA column, to Show Order > 2 on the Telephone breakpoint.
Whilst you cycle via all breakpoints, each and every breakpoint shows the CTA within the order you specified.
Responsive Absolute best Practices And Pointers
Now that you understand how to reorder content material with Flexbox in Divi 5, listed here are sensible pointers that will help you use those equipment successfully whilst protecting layouts blank and more uncomplicated to take care of.
Set Show Order Values At The Breakpoint Degree
Steer clear of converting the order on Desktop until the desktop design in particular calls for it. Make maximum reordering changes on the Pill or Telephone breakpoint the use of Divi’s Customizable Responsive Breakpoints and/or the Responsive Editor. This assists in keeping your desktop structure ruled by way of blank supply order whilst permitting centered cellular adjustments.
Use Unfavourable Values When Suitable
When a very powerful component, reminiscent of a featured card or number one CTA, wishes to look previous on cellular, set its Show Order to -1. That is typically cleaner than assigning massive sure numbers to each and every different merchandise. Unfavourable values obviously mark the thing that are supposed to transfer previous.
Most effective Reorder Parts That Want It
Each and every flex merchandise begins with the similar default order price. You typically best want to alter the pieces you wish to have to transport. Reordering each and every column creates needless upkeep paintings and makes long run troubleshooting more difficult.
Reorder Based totally On Content material Hierarchy, Now not Simply Look
The most powerful reason why to modify order on cellular is to strengthen the customer’s drift during the web page. Prioritize key messages, calls to motion, featured playing cards, opt-ins, or visible anchors in keeping with what the consumer wishes to look first. Each and every reordering resolution must make stronger the cellular content material hierarchy, no longer simply reflect a desktop design trend.
Obtain The Layouts
To make the workflow more uncomplicated to discover, we’ve created a zipped folder containing the segment layouts used on this put up. Those are the completed, reordered variations, so you’ll check out how Show Order, Structure Wrapping, and Wrap Opposite paintings in combination throughout breakpoints.
To make use of them, fill out the shape beneath to get entry to the information. Then cross to Divi > Divi Library and click on the Import & Export button.
Transfer to the Import tab, select a JSON report to add, and click on Import Divi Builder Layouts.
Subsequent, create a brand new web page or open an current one within the Visible Builder. Click on the blue + icon so as to add a brand new segment to the web page.
Make a choice Upload From Library, choose a structure, and click on Use This Phase.
Unencumber Cellular Reordering In Divi 5
You now not want to replica sections or write customized CSS for not unusual cellular reordering patterns. With Divi 5‘s Flexbox ordering controls, you’ll create extra intentional cellular layouts whilst protecting the desktop construction intact.
In Section 6 Of Mastering Flexbox: Key Pointers For Construction Responsive Layouts, we’ll carry the whole thing at the side of responsive structure methods, breakpoint-level changes, and real-world workflow pointers for construction cleaner Divi 5 layouts.
Download Divi 5, import the instance layouts, and get started experimenting with cellular reordering. Drop a remark beneath and tell us which reordering method you discovered most precious.
The put up Part 5 Of Mastering Flexbox: Reordering Content For Better Mobile Layouts gave the impression first on Elegant Themes Blog.
0 Comments