Header: Menu, Logo, Bar 1, Images Bar 2
Body: Left sidebar, content, right sidebar
1) Add WP Responsive Menu as a plugin. There are a few out there but this is the one I liked the best.
2) Add the following to HTML/CSS inserts:
Code:
@media (max-width:632px) { #menu1, #left, #horbar1, #horbar2, #imagecontainer { display: none !important;} #wrapper {width: 100% !important;} table, thead, tbody, th, td, tr { display: block; } }
@media calls out this CSS when the browser width is less than 632px.
At that width, the original menu, bars, and rotating image disappear. In addition, so does the left sidebar. In addition, all table cells then become block display. This shoves the right sidebar to the bottom.
It worked pretty well in all the ways I've been able to test so far, so I thought I'd share the knowledge.