Hi Mol4

To amend try adding the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 767px) {

    #main {

        display: flex;

        flex-direction: column;

    }

    .sidecol_a, .sidecol_b {

        order: 1;

    }

} 

Ciarán

Hello Ciarán,

Thanks for your fast answer.
When I resize the screen to a small device width on my PC this works.
But when I look with my mobile (iPhone 5) the maincontent and module aren't visible anymore.

Hi Mol4

It can be tricky as by default jQuery is used to reorder the content however this only happens when the page is loaded which is why the content jumps after everything loads. The suggested solution uses Flex however this relies on the browser been up to date. Just to ensure the jQuery is not conflicting with the above solution try removing the following from your templates scripts.php (../templates/[YourTemplate]/php/scripts.php)...

<!-- Responsive stacking order -->

<script type="text/javascript">

jQuery(document).load(jQuery(window).bind("resize", listenWidth));



    function listenWidth( e ) {

        if(jQuery(window).width()<959)

        {

            jQuery("#sidecol_b").remove().insertAfter(jQuery("#content_remainder"));

        } else {

            jQuery("#sidecol_b").remove().insertBefore(jQuery("#content_remainder"));

        }

        if(jQuery(window).width()<959)

        {

            jQuery("#sidecol_a").remove().insertAfter(jQuery("#content_remainder"));

        } else {

            jQuery("#sidecol_a").remove().insertBefore(jQuery("#content_remainder"));

        }

    }

</script>

<?php endif; ?> 

Ciarán

Hello Ciarán,

I've tried your suggestion but without removing the line: <?php endif; ?> because otherwise the site breaks.
But still this is no solution.
I've made a 'simple quik solution' and hide the module in the sidebar position on mobile.
I've made a module with the same image at the contentbottom position that I hide on desktop and tablet.
This works also fine :-)
Thanks!

Excellent solution... thank you for sharing!

Ciarán