Change Columns Order on Mobile

[Alex]

#485621

Hello

Is there an easy way to change the order how columns are displayed on mobile?

I’ve got a 1/4 – 3/4 Container where I’d like to show the 3/4 Container on top of the 1/4 on mobile devices but keep the 1/4 column on the left side on larger screens.

[wolverinejoe80]

#510576

i’m looking for this answer too…

[pigsandbees]

#510814

Duplicate the row that has the 1/4 + 3/4 containers. Set the original to display on medium and large screens only. Set the duplicate to only display on small screens and drag your 3/4 container to the left of the 1/4 container so it’s a row of 3/4 + 1/4.

[KAAPKE]

#526159

That will work, but if there are five relevant rows on every page of your website that solution is not very comfortable. Is there an easier way like using a class or so?

[KAAPKE]

#526235

Hi there!

Got a smarter solution from the avada support (thanks again guys!!):

Please assign this class “reverse-cols” to container and add below css code in the custom css section of theme options.

@media all and (max-width:800px){
.reverse-cols .fusion-row {
display: flex;
flex-flow: wrap;
flex-direction: column-reverse;}}

[Alex]

#526236

Here’s what worked for me:

@media screen and (max-width: 800px) {
    .fusion-row { display: flex; flex-flow: column; }
    .fusion-column-last { order: 1}
    .fusion-column-first { order: 2}
}

You might be able to tweak it with your own classes and order them that way.

Hope this helps.

[g0ldgrrl]

#526517

<snip – mistake>

[DFeick]

#535460

This worked perfectly! Thanks, Austern!

Please assign this class “reverse-cols” to container and add below css code in the custom css section of theme options.

@media all and (max-width:800px){
.reverse-cols .fusion-row {
display: flex;
flex-flow: wrap;
flex-direction: column-reverse;}}

[valeirski]

#675989

ty

[marklchaves]

#676186

The forum isn’t allowing me to post my replies and comments to the code contributions above. So, I posted my thoughts and solution on GitHub.

https://gist.github.com/marklchaves/aadd94aa13bd7e753031b4d54e948669

[Author]

Posts