[Blackwood]

Is there a way to set things up so the left side stays where it is and the right side bar gets moved to the bottom when the browser is too narrow? A child theme solution would be great.

https://avida-ed.beacon-center.org/

[Mahesh]

@blackwood: Can you please clarify more.

Regards,
Mahesh

[Blackwood]

I have catch flames set up with two side bars (left and right). When the browser window is wide, both side bars show up on either side of of the main center area. When I make the window narrower, the left side bar appears to disappear. Actually the content of the left sidebar shows up at the bottom and can be seen by scrolling down.

Is there anyway for the right side bar to be the one to get bumped to the bottom and seem to disappear? I am willing to use any of the free catchthemes, but would need to get permission to pay for a premium theme – as this is a fairly simple web site to support a free educational software application.

Thanks
Diane

[Mahesh]

@blackwood: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

@media screen and (max-width: 1000px) {
    .three-columns #main #secondary {
    	display: none;
    }

    .three-columns #main .content-sidebar-wrap {
    	width: 67%;
    }

    .three-columns #main #primary {
    	float: right;
    	width: 100%;
    }

    .three-columns #main #third-sidebar {
        width: 30%;
    }

    .three-columns #third-sidebar .widget {
    	width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .three-columns #main .content-sidebar-wrap {
    	width: 100%;
    }
    .three-columns #main #third-sidebar {
        width: 100%;
    }
}

Regards,
Mahesh

[Author]

Posts