In Section 4 of our Mastering Flexbox collection, we confirmed you the best way to align content material with out hidden spacers or customized CSS by means of the use of Justify Content material, Align Pieces, Develop To Fill, Module Teams, and Nested Modules.
Now it’s time to unravel every 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 would possibly not create the most efficient studying float. Pictures can stack above the unsuitable textual content, key CTAs can seem too low, featured playing cards can lose precedence, and the entire rhythm can really feel off.
Divi 5’s Flexbox Format Gadget provides you with visible controls for reordering content material throughout breakpoints. With Show Order, and in some instances Wrap Opposite, you’ll support the cellular revel in within the Visible Builder with out duplicating sections or writing customized CSS for not unusual reordering patterns.
On this phase, you’ll learn to repair not unusual cellular stacking issues, create extra intentional mobile-first flows, and handle more potent visible hierarchy throughout breakpoints.
Let’s dive in.
Why Cell Reordering Issues
On desktop, in moderation designed layouts continuously depend on side-by-side relationships. Pictures and textual content change, supporting content material sits beside key messages, and featured parts are located for visible steadiness.
On cellular, those self same parts in most cases stack vertically. Divi follows the supply order of the structure, so the part that looks first within the construction in most cases seems first on smaller monitors. That may create problems similar to:
- Pictures stacking above different photographs as a substitute of pairing with their comparable textual content.
- Necessary CTAs showing underneath lengthy sections of supporting content material.
- Featured playing cards showing after much less necessary playing cards.
- Cell layouts that really feel visually disconnected from the desktop design.
Those problems impact greater than aesthetics. Deficient cellular ordering could make a web page tougher to scan, decelerate decision-making, and push necessary movements farther down the display. Guests on telephones desire a logical float that gifts probably the most related data on the proper second.
Divi 5 allows you to proper those problems with out growing replica sections for cellular. With Flexbox ordering controls, you’ll modify the cellular revel in whilst maintaining one cleaner structure construction.
Core Reordering Options In Divi 5
Divi 5 provides you with a couple of necessary equipment for controlling content material order throughout breakpoints. The principle one is Show Order. Wrap Opposite too can lend a hand in particular wrapped layouts, particularly when you need to switch how wrapped strains stack.
Show Order
The main instrument for reordering content material is Show Order, positioned within the Content material tab below the Order possibility team. You’ll be able to apply it to flex pieces similar to columns, modules, rows, and Module Teams, relying at the father or mother structure context.
Decrease numbers seem previous within the visible order, whilst upper numbers seem later. The default price is 0. You’ll be able to use damaging numbers, similar to -1, to drag a component previous, or sure numbers to transport a component later within the visible order.
Usually, modify Show Order on the Pill and Telephone breakpoints whilst leaving Desktop at its default supply order. This helps to keep your desktop construction more straightforward to handle whilst providing you with centered regulate on smaller monitors.
Wrap Opposite
Wrap Opposite comes in handy when running with wrapped content material. As an alternative of latest flex strains stacking within the standard cross-axis path, Wrap Opposite puts wrapped strains in the other way. This doesn’t change Show Order for exact item-by-item reordering, however it might lend a hand with positive responsive patterns the place a complete wrapped line must transfer visually.
Cell Reordering Examples
Underneath are six examples that display the best way to clear up not unusual cellular stacking issues the use of Divi 5’s Flexbox reordering controls. Each and every instance explains the desktop purpose, the cellular factor, and the centered adjustment that improves the cellular float.
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 Cell: By means of default, Divi stacks columns in line with their supply order. If the picture column comes first, cellular guests might see a big picture ahead of they see the headline, supporting textual content, or CTA buttons. This delays the web page’s major message.
The Resolution: 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 Cell?
On telephones, house is proscribed and customers scan briefly. Appearing the heading and worth proposition first is helping guests perceive the web page ahead of they decide to scrolling. Striking CTA buttons upper too can make the following motion more straightforward to search out.
Purpose: Create a four-column footer on desktop, similar to Corporate, Merchandise, Assets, and Touch & Fortify, whilst ensuring the Touch column seems upper on cellular.
The Downside On Cell: When footer columns stack on smaller monitors, the Touch & Fortify column might finally end up closing. This will pressure cellular customers to scroll thru much less pressing hyperlink teams ahead of attaining telephone numbers, e mail hyperlinks, or enhance choices.
The Resolution: Permit Format Wrapping > Wrap on Pill. Then, at the Telephone breakpoint, transfer to Wrap Opposite. This adjustments how the wrapped columns stack, permitting the closing column to transport upper within the cellular float with out manually assigning Show Order values to each column.
Why Use Wrap Opposite Right here?
Wrap Opposite comes in handy when the primary factor is line-level stacking relatively than exact particular person ordering. For footers, it may be a low-maintenance method to deliver later columns, similar to touch main points, upper on smaller monitors whilst maintaining the desktop footer construction intact.
3. Alternating Symbol-Textual content Rows
Purpose: Handle an alternating structure on desktop, similar to picture left/textual content proper adopted by means of textual content left/picture proper, whilst making a constant cellular float.
The Downside On Cell: 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 Resolution: 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 maintaining the desktop alternating structure unchanged.
Why Put The Symbol Above Textual content On Cell?
For supporting content material sections, photographs can act as visible anchors that introduce each and every subject. A constant image-first development could make repeated sections more straightforward to scan. That is other from a hero segment, the place the headline and CTA in most cases deserve precedence.
4. Featured Card Grid
Purpose: Create a balanced three-column card grid on desktop with a featured card within the heart, whilst ensuring the featured card seems first on cellular.
The Downside On Cell: On desktop, the featured card might take a seat within the middle for visible steadiness. 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 Resolution: 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 maintaining the desktop grid unchanged.
Why Put The Featured Card First On Cell?
On cellular, customers see one card at a time. If one card highlights a key be offering, major get advantages, or maximum necessary possibility, hanging it first provides it instant visibility and helps a clearer hierarchy.
5. Sidebar Format
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 Cell: By means of 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, even though it accommodates necessary CTAs, paperwork, or opt-ins.
The Resolution: 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 monitors. Within the sidebar, set the e mail opt-in Module Team to Show Order > -1 so it seems that on the peak of the sidebar content material.
Why Put The Sidebar First On Cell?
Sidebars continuously include high-value movements, similar to e-newsletter signups, touch paperwork, or promotional CTAs. Transferring the sidebar upper could make the ones movements extra visual ahead of customers scroll thru an extended article or web page.
Why Transfer The E mail Decide-In To The Best Of The Sidebar?
The e-mail opt-in is continuously some of the necessary movements in a sidebar. Transferring it to the highest creates an previous alternative for engagement whilst keeping the desktop structure.
6. Name To Motion + Blurbs
Purpose: Create a bit with a headline row, 3 function blurbs, and a distinguished button team on desktop, whilst bringing the CTA buttons upper on cellular.
The Downside On Cell: If Divi stacks rows in supply order, customers see the headline, then the blurbs, and simplest then achieve the CTA buttons. On cellular, it will position the main motion too a long way down the web page.
The Resolution: Use Show Order on the row point as a substitute of simplest 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 data in a while.
Step-By means of-Step Construct Walkthrough
Now that you simply’ve observed how Show Order and Wrap Opposite can support cellular layouts, let’s construct a easy three-column segment. On Desktop, the columns take a seat facet by means of facet. On Pill, the CTA strikes upper. On Telephone, you’ll select the order that absolute best helps the content material hierarchy.
Step 1: Create The Desktop Format
Upload a three-column row to a web page within the Visible Builder. Set the Vertical Hole and Horizontal Hole to 25px, then go away 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: Alter 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 observe to the Pill breakpoint, whilst the Desktop structure stays unchanged.
Subsequent, modify the choice of columns proven on the Pill breakpoint. Open each and every column and assign a Column Magnificence, similar to 1/2 for the primary two columns and Fullwidth for the 3rd column.
Step 3: Permit Format Wrapping
Subsequent, allow Format Wrapping on the Pill breakpoint. With out wrapping, the Column Magnificence settings would possibly not wreck into more than one strains as anticipated when the to be had width adjustments.
Within the row’s Design tab, open the Format possibility team and set Format Wrapping to Wrap. This permits the columns to transport onto further strains.
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, pass to Order > Show Order and input -1.
Surroundings 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.
Evaluation how the segment stacks on Telephone. Divi 5’s responsive controls permit you to make further Telephone-specific changes when the perfect cellular order differs from Pill.
If you need the picture to seem first on Telephone whilst maintaining the CTA upper on Pill, modify the 3rd column, the CTA column, to Show Order > 2 on the Telephone breakpoint.
While you cycle thru all breakpoints, each and every breakpoint presentations the CTA within the order you specified.
Responsive Perfect Practices And Pointers
Now that you understand how to reorder content material with Flexbox in Divi 5, listed below are sensible pointers that can assist you use those equipment successfully whilst maintaining layouts blank and more straightforward to handle.
Set Show Order Values At The Breakpoint Stage
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 helps to keep your desktop structure ruled by means of blank supply order whilst permitting centered cellular adjustments.
Use Adverse Values When Suitable
When a very powerful part, similar to a featured card or number one CTA, wishes to seem previous on cellular, set its Show Order to -1. That is in most cases cleaner than assigning massive sure numbers to each different merchandise. Adverse values obviously mark the thing that are supposed to transfer previous.
Simplest Reorder Parts That Want It
Each and every flex merchandise begins with the similar default order price. You in most cases simplest wish to modify the pieces you need to transport. Reordering each column creates needless upkeep paintings and makes long term troubleshooting tougher.
Reorder Based totally On Content material Hierarchy, Now not Simply Look
The most powerful reason why to switch order on cellular is to support the customer’s float throughout the web page. Prioritize key messages, calls to motion, featured playing cards, opt-ins, or visible anchors in response to what the consumer wishes to look first. Each and every reordering resolution must enhance the cellular content material hierarchy, now not simply replicate a desktop design development.
Obtain The Layouts
To make the workflow more straightforward 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 up on how Show Order, Format Wrapping, and Wrap Opposite paintings in combination throughout breakpoints.
To make use of them, fill out the shape underneath to get entry to the recordsdata. Then pass 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.
Select Upload From Library, choose a structure, and click on Use This Phase.
Unencumber Cell Reordering In Divi 5
You now not wish 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 maintaining the desktop construction intact.
In Section 6 Of Mastering Flexbox: Key Pointers For Development Responsive Layouts, we’ll deliver the whole thing along side responsive structure methods, breakpoint-level changes, and real-world workflow pointers for development cleaner Divi 5 layouts.
Obtain Divi 5, import the instance layouts, and get started experimenting with cellular reordering. Drop a remark underneath and tell us which reordering methodology you discovered Most worthy.
The put up Section 5 Of Mastering Flexbox: Reordering Content material For Higher Cell Layouts seemed first on Sublime Issues Weblog.
WordPress Web Design