I am looking for a stable, browser-friendly way of displaying the sidebar content above the content while the screen is smaller than 600px wide. Some background:
I am using a child theme of Twenty-Twelve, with no major structural changes to the child theme. The goal is total stability during theme or WP updates, as this is a fairly major site. So far it has passed that test well. I mostly have widgets with custom code and a few custom page templates. I use one of these widgets to create an "internal" secondary menu in the sidebar, which shows a parent page back link, the current page highlighted, and all sibling pages.
I use CSS to switch the sidebar to the left, and it shrinks to a certain degree nicely, until the theme switches to mobile mode, and drops the sidebar to the bottom. This would be fine for the other widgets I have, but the internal menu is pretty important for consistency of navigation, and I would like to keep it up top at a much-reduced size (perhaps spanning 100% of the width).
Anyway, I think the problem, mark-up-wise, is that the content is called first, and it increases to 100% width in low-res mode (>600px). Is there a way around this with either CSS and/or child theme changes? I have searched and searched the support topics here and elsewhere, and the only nearly satisfactory answer I found was registering a secondary 'sidebar' below the header, which I might have to resort to solely for replacing the navigation widget. Does anybody know of other solutions?
One more consideration: the navigation widget in question uses get_pages and is ID-dependent. It also calls up a custom field from all the sibling pages for adding subtitle descriptions. From my limited WP/loop understanding, I am not sure whether or not this poses a problem getting the sidebar before the page, if creating another sidebar first.
Thanks in advance!