Grid Row Anordnung und Priorität auf Handys

Hi MaktubJolie!

Yes, it’s possible. Here is the concept of the fix: duplicate/clone 2nd,4th row and so on or those that have text-image arrangement and have the clone be in text-image arrangement, the original will be shown on desktop and hidden on mobile while the 2nd row will be hidden on desktop and shown in mobile. In order for you to do so, you need to do the following:

Go to Appearance > Editor and open functions.php and find this code:
// add_theme_support('avia_template_builder_custom_css');
and replace it with
add_theme_support('avia_template_builder_custom_css');
then save it.

Go to the page with gridrows you want to arrange on mobile and duplicate the even rows (2nd,4th, so on)

Edit the original Grid Row and at the bottom you should see Custom Css Class add this in it: hide-mobile and Save

Edit the cloned Grid Row and in the Custom Css Class add: hide-desktop then Save and Update

Go to Enfold Theme Options > General Styling > Quick CSS and add this code:

.hide-desktop{
    display: none;
}

@media only screen and (max-width:767px) {
    .hide-desktop{
        display: block;
    }

    .hide-mobile {
        display: none;
    }
}

and Save

Hope this helps. :)

Regards,
Nikko

• This reply was modified 7 years, 9 months ago by Nikko. Reason: formatting

Hi MaktubJolie ,

Glad that I could help :)

Best regards,
Nikko Ayag