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

    When using Layout Elements from Avia Layout Builder, is there any way to have a custom display order of the columns when the page is viewed from a mobile device.

    Example below.

    [av_one_third first]Sidebar Content[/av_one_third]
    
    [av_two_third]Main Content[/av_two_third]

    When viewed on mobiles I would like the Main Content to display before/above the Sidebar Content.

    Please advise the best way to do this.

    Thanks in advance.

    #681103

    Hey cullingfordconsulting,

    To achieve what you are looking for you could place the element in different Color Section to display on different screen sizes. You can do this by adding ID’s to your Color Sections in the element options and then show/hide them with CSS:

    @media only screen and (min-width: 768px) {
    #desktop {
    display:block;
    }
    #mobile {
    display:none;
    }
    }
    
    @media only screen and (max-width: 767px) {
    #desktop {
    display:none;
    }
    #mobile {
    display:block;
    }
    }

    Best regards,
    Rikard

    #681116

    Thanks for your response Rikard.

    Am I correct in saying that to use your code I could need to duplicate the content in the order to display for mobile and the order to display for desktop? I have come across this method before but I was hoping to find some CSS or shortcode parameters for the same result without having to duplicate the content.

    #681554

    Hi,

    That is correct, and specify unique ID’s for your Color Section elements. As far as I know there is no solution to make elements collapse the “wrong” way.

    Regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.