Reply To: Future Addon Ideas

[Tom]

You can do stuff like this using media queries.

Moving elements around requires some new CSS that only works on modern browsers, but most mobile users are on mobile browsers, so it gives you some flexibility.

For example, moving a navigation that is below the header on desktop to below the header on mobile:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-flow: column;
    }
    .site-logo {
        order: 2;
    }
    .site-branding {
        order: 3;
    }
    .main-navigation {
        order: 1;
    }
}

You can use any CSS inside the media queries:

@media (max-width: 768px) {
    /* Any CSS in here is for mobile only */
}

Hope this helps 🙂