Changing Sidebar order on mobile

Had another user request this the other day.

Off to bed right now (12AM), but will look into this tomorrow. There should be something I can do.

Thanks! :)

Ok, best way to do this is to use jQuery.

Paste this into the wp_footer hook using GP Hooks, or enqueue it as a .js file:

<script>
jQuery(window).load(function($) {
	var mobile, widthTimer, leftSidebar, rightSidebar;
	mobile = jQuery( '.menu-toggle' );
	leftSidebar = jQuery( '#left-sidebar' );
	rightSidebar = jQuery( '#right-sidebar' );
			
	function generateRearrangeSidebars() {
		
		if ( leftSidebar.is( ':visible' ) && leftSidebar.is( ':visible' ) ) {
	
			if ( mobile.is( ':visible' ) ) {
				rightSidebar.insertAfter('#primary');
			} else {
				rightSidebar.insertAfter('#left-sidebar');
			}
		
		}
	}
			
	if ( mobile.is( ':visible' ) ) {
		generateRearrangeSidebars();
	}
			
	jQuery(window).resize(function() {
		clearTimeout(widthTimer);
		widthTimer = setTimeout(generateRearrangeSidebars, 100);
	});
});
</script>

Tom,

fantastic - thanks for the quick response, that's perfect.

Loving this theme.

Best regards

James

Perfect, happy to help :)

Mmm, this post is from 2015...now 2018!

Tom, there MUST be a wisywyg way to do this?

Trying in customizer but they don't hold their positions...

Thanks,
Bruno

Something like this maybe:

https://generatepress.com/forums/topic/change-order-on-mobile/#post-157121

Yea, Flexbox is definitely the way to go now :)