Home Forums Community Forum Change Columns Order on Mobile

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • Alex
    Participant
    Post count: 2

    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
    Participant
    Post count: 15

    i’m looking for this answer too…

    pigsandbees
    Participant
    Post count: 29

    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.

    Austern Fischer
    Participant
    Post count: 2

    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?

    Austern Fischer
    Participant
    Post count: 2

    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
    Participant
    Post count: 2

    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
    Participant
    Post count: 2

    <snip – mistake>

    DFeick
    Participant
    Post count: 1

    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
    Participant
    Post count: 1

    ty

    marklchaves
    Participant
    Post count: 627

    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

Viewing 10 posts - 1 through 10 (of 10 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.