[Resolved] reverse column order on mobile and tablet

Home Forums Support reverse column order on mobile and tablet

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1348198
    Heinrich

    Hi,

    I tried to modify the code from another support topic, so the columns swap at 1030px, but that doesn’t work.


    @media
    (max-width: 1030) {
    .reverse-mobile {
    flex-direction: column-reverse;
    }
    }

    #1348442
    David
    Staff
    Customer Support

    Hi there,

    You can do this with GenerateBlocks – for tablet at 1024px:
    Select a grid item ( column ) then in the Settings sidebar, select Tablet and under Layout you will see an Order field.

    You can now set a specific order for your columns on mobile.
    For example add 2 to your first (left hand ) column and then 1 to your second (right hand ) column to reverse the order on tablet ( or mobile ).

    If you need that specific 1030px breakpoint then make sure you have the reverse-mobile class on the Grid Block not the Container Block.

    Currently your class is on the Container Block so the CSS would be this:

    @media(max-width: 1030px) {
        .reverse-mobile .gb-grid-wrapper {
            flex-direction: row-reverse;
        }
    }
    #1348543
    Heinrich

    Great thanks!

    #1348572
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.