Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Reply to Avada Froum Thread: Change Column Order on Mobile

Reply to Avada Froum Thread: Change Column Order on Mobile

Thanks for sharing your code, Austern & Alex!

I've used CSS order properties with other themes, but not yet with Avada. Your posts gave me inspiration to refactor one of my Avada staggered layout designs as a test.

The code posted by Austern, then reposted by DFeick didn't work for me. I also wanted a mobile-first design.

Anyway, here's the CSS I came up with that worked for me. If anyone is interested.

Mobile First CSS

 * Fix the Staggered Problem for Mobile Stacking Order 
 * This is a mobile-first approach.
@media all and (min-width: 767px) {
  #reverse-cols1 .fusion-builder-row.fusion-row {
    display: flex !important;
    flex-flow: wrap;
    flex-direction: row-reverse;

Adding the CSS ID to Avada Fusion Builder Container

Adding the CSS ID to you Fusion Builder container

Imgur Link

Adding Custom CSS to WordPress

CSS Code Diff Between Forum Example and My Solution

CSS Code Diff

Imgur Link

Mobile First Staggered Layout in Fusion Builder (No Staggering Yet)

Make sure you order your components and columns for mobile view first. The CSS above will reverse the order for the second row to produce the popular staggered (zigzag) layout.

Mobile First Staggered Layout in Fusion Builder

Imgur Link

In the Wild

Real World Example of Staggered Layout Using Avada

Imgur Link

CodePen: Vanilla HTML and CSS

I document the staggered/alternating columns problem with a mobile-first solution in more detail here

Updated 3 December 2019

I just published a comprenisve article on this stacking order anti-pattern on DEV.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.