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

我正在对我的大学报纸网站进行重新设计，并且设计得非常适合iPad。我现在试图将其切换到一个列布局（智能手机）。在响应式设计中移动最左侧的列

Website on an iPad

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

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

编辑：我意识到我可以有一个DIV，当宽度> someNumber时是不可见的。我宁愿不必多余，虽然...

2012-01-13 Daniel O' Connor

CSS唯一的解决方案是以最小的屏幕作为默认设计，然后随着使用媒体查询屏幕尺寸增加而增强。首先从最小的屏幕开始，按照正确的顺序放置标记 - 横幅，主要导航，主要内容（右侧列），旁侧（左侧列）和（可能）页脚上的图像。由于媒体查询应用了额外的CSS，因此您可以将主内容右键悬浮并保留 - 剩余的元素正确放置在较小或较大的屏幕上。

来源

2012-04-30 14:29:44

非常聪明 - 我终于明白为什么人们想要先为手机编码。 – 2012-05-09 19:40:19

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

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

来源

2012-01-13 02:21:48

要做到这一点，您需要知道右列占据的垂直像素数量吗？ – 2012-01-13 02:25:40

是的，我不确定是否让左边的相对右边和右边的绝对（这将避免知道右边的高度） – 2012-01-13 02:39:58

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

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

来源

2012-01-13 02:58:43

谢谢！我一直在想，但我宁愿不必依靠JavaScript。如果我找不出好人的解决方案，我可能会和你一起去。谢谢！ – 2012-01-13 03:14:03

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

回答

相关问题