如何在小屏幕上将两个侧边栏移动到内容以下？

Question

这里是我的codepen减少测试用例：http://codepen.io/RonStrilaeff/pen/pKBdf

我有我的网页与他们之间的内容自动调整大小...的作品外边缘的两个固定宽度的侧边栏。要求一边是一边是正确的。

但是，当屏幕变小时，我想将侧边栏向内下推。这基本上与我的演示相反。 :-)

我想知道什么样的CSS魔术我必须做我的媒体查询内部，使其表现这种方式？我认为它有一些简单的浮法或明确，我还没有掌握。或者，也许我需要以不同的顺序开始我的div在html中。

任何帮助，非常感谢。

Answer 1

Chris Coyier的网站和论坛收集的一些原则帮助我。

这里是我与（第一codepen的叉）去溶液：

http://codepen.io/RonStrilaeff/pen/oefav

• 把内容的div第一与特定边缘匹配边栏的宽度
• 通常所作的侧边栏在包含两个侧边栏和内容的包装中固定（顶部，左侧或右侧）以及无论任何宽度需要的内容，使每个侧边栏静态并向左或向右浮动（由于源顺序，下面的内容是自然的）同时删除相应的内容保证金

瞧！

我对此非常满意，因为它并不涉及太多的代码，而且看起来很标准......即：没有“技巧”:-)