marklchaves/reverse-columns-order-css.md

## reverse-columns-order-css.md

      
    Raw
  

              reverse-columns-order-css.md
            
          
    Reply to Avada Froum Thread: Change Column Order on Mobile https://theme-fusion.com/forums/topic/change-columns-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


Imgur Link
Adding Custom CSS to WordPress
CSS Code Diff Between Forum Example and My Solution


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.

Imgur Link
In the Wild (formerly)

Updat 12 March 2020

This was originally implemented on https://marklchaves.com/portfolio-items/web-development/. I've moved my main portfolio from WordPress/Avada to CloudCannon/Jekyll.
Here's what that page used to look like in the wild.

Imgur Link
CodePen: Vanilla HTML and CSS

I document the staggered/alternating columns problem with a mobile-first solution in more detail here https://codepen.io/marklchaves/pen/qBEWrWw
Updated 3 December 2019

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