在响应式CSS和HTML网站中向下推侧边栏

Question

Is there a way to make a sidebar collapse to the bottom of the page without any JavaScript when the browser reaches a certain size.

I'm creating a responsive theme that can be seen at http://flexibletheme.tumblr.com/ . By resizing your browser window to below 600px, the theme goes into a linear version (just resize your browser smaller until it changes to this).

At the top the sidebar changes into a full menu, and this is the part which I want to go to the bottom instead of staying at the top.

The relevant parts of the CSS code are @media screen and (max-width: 600px) [this tells the browser to use the specified CSS when the browser is less than 600px], the sidebar using the HTML 5 element called , and each post is wrapped in .

Answer 1

Have you tried moving the entire aside block underneath the container? I'm still learning responsive web design myself, but my understanding is that if you structure your html for the smallest size you want to accommodate, you will have a cleaner layout with less hacks.

Answer 2

将侧边栏放置在#container div中，然后将部分向左浮动，将侧边栏向右浮动。