Left sidebar is showing on the top of the content in portrait and mobile view

Sure Azi.

To solve this problem you can use jQuery to “reorder the divs.”

Here is a stackoverflow about how to do it.

Basically you will write a script that detects the window/screen size and then executes this “reordering.”

Hope this helps.

https://stackoverflow.com/questions/10088496/jquery-reorder-divs

Hi DevDm,
Thank you for your respond. I wanted to just reorder the sidebar for iPad and mobile view and I am not savvy enough using jQuery for that matter, but I created a new sidebar to only show after content by calling it from style sheet for @media(max-width: 768px)and that did fix my problem.
Thank you again for taking your time and get back to me.

Best,
Azita

I know this was 10 months ago now, but any chance you can share the code you used to get around this or at least point me in the direction? Currently have a left sidebar that i need to fall under content in mobile view. Are you creating two sidebars, and just hiding one and displaying the other at certain widths? thanks!

Hey Retrokevin,

I did some messing around and came up with this. Keep in mind I’m not a JS wizard.

You’ll need to create some files in your child theme (if you don’t have them already) to follow along here.

functions.php
/js/reorder-sidebars-mobile.js

In your functions.php you want to enqueue the script

<?php

/**
 * Proper way to enqueue scripts and styles Child Theme
 */

function devdmbootstrap3_child_theme_scripts() {
    wp_enqueue_script( 'reorder-sidebars-mobile', get_stylesheet_directory_uri() . '/js/reorder-sidebars-mobile.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'devdmbootstrap3_child_theme_scripts' );

In your reorder-sidebars-mobile.js file you can use this code

jQuery(document).ready(function( $ ) {

    var mobilewidth = "767";

    if ($(window).width() < mobilewidth) {
        $('.dmbs-left').insertBefore('.dmbs-right');
    }

    $( window ).resize(function() {
        if ($(this).width() < mobilewidth) {
            $('.dmbs-left').insertBefore('.dmbs-right');
        } else {
            $('.dmbs-left').insertBefore('.dmbs-main');
        }
    });

});

The first function sets the “order” when the window is loaded. Moves the left column on top of the right column if mobilewidth threshold is hit.

The re-size function will ping every time the window is re-sized. I “think” this is triggered with a screen rotation so we are doubling up to cover all our bases. It will also put the left sidebar back when the threshold is detected as no longer hit.

Hope this helps!

Thanks a ton for this! I’ll be trying it tonight. In the mean time i found a simple css trick that seems to be working. Something a long the lines of
`@media only screen and (max-width: 1023px) {
.content-sidebar-wrap {display:table;}
.content {display:table-footer-group; float: none;}
.sidebar {display:table-header-group; float: none;}
}`