在响应式设计中移动最左侧的列

Question

我正在努力重新设计我的大学报纸的网站，并使设计很好地适应iPad。我现在正试图将其切换为一列布局（用于智能手机）。

问题在于，在单列布局中，右列必须位于左列之上。如果右列的代码写在左列之前，我会知道如何做到这一点，但不幸的是，它不是。

如何在右栏下方移动左栏？我是否需要使用Javascript来切换HTML代码中的列顺序？谢谢！

编辑：我意识到当宽度＆gt;时，我可以拥有一个不可见的DIV。 someNumber。我宁愿不要多余但是......

Answer 1

CSS唯一的解决方案是从最小屏幕开始作为默认设计，然后随着屏幕尺寸的增加使用媒体查询进行增强。从最小的屏幕开始，首先按正确的顺序放置标记 - 对于横幅，主导航，主要内容（右侧列），旁边（左侧列）和（可能），页脚上方的图像。当媒体查询应用额外的CSS时，您可以向右浮动主内容，而在左侧 - 元素可以正确放置在更小或更大的屏幕上。

Answer 2

CSS可以从文档流中取出元素，并以任何方式将它们放在任何位置。但它无法创建新的文档流程（即它无法重新排序元素）。您需要相对于另一个元素放置一个元素或绝对定位它们。

如果您可以访问Javascript并且不关心优雅降级，那么您也可以交换两个div的.innerHTML。

Answer 3

我能想到的最简单的方法是使用jQuery（一个javascript库）将正确的列内容从DOM中的一个div移除到另一个div。这允许您动态创建和删除div，因此最终没有冗余。

如果这太模糊，请评论，我会添加一个例子。