Want sidebar to stack above page content on mobile?

Hi there

I am using the Avada theme for my site https://www.whitesmileclinic.ie

I really need the sidebar to stack above the main page content on every page in mobile version? Can anyone help with the custom Css for this please? At the moment the sidebar defaults to being stacked under the main page content in mobile.

I have tried using the following CSS but it seems to only work in landscape mobile view and makes the content and sidebar push off to the right in portrait mobile view For some reason.

‘@media only screen and (min-device-width : 320px)
and (max-device-width : 1023px) {
#content {display:table-footer-group; float: none;}
#sidebar {display:table-header-group; float: none;}
}’

Any help would be very much appreciated as i have been trying to conquer this for weeks!!!!

Cheers
Guy