Javascript 为响应站点复制HTML或使用JS移动元素

有一个我正在工作的站点，为平板电脑/移动设备设计的站点需要我移动元素（从左侧边栏到右侧、更改订单等）。这些元素包括简单的文本和图像（非常小，徽标）

我的问题是，什么是最好的方法？到目前为止，我只有两种方法

---

1） 复制HTML内容，然后使用CSS媒体查询显示/隐藏。我在这里担心的是，它不是SEO友好的，内容/图像仍然会被渲染，即使是隐藏的。这会给我留下性能问题吗

2） 使用JS移动元素。我在这里担心的是，禁用JS的人仍然会在旧地方看到内容，也许这个JS解决方案会对性能产生更大的影响

如果您能在这种情况下提供一些关于最佳实践的建议，我将不胜感激

以下是我努力实现的目标：

---

您提到您不愿意使用display:hidden，因为它们的某些内容正在被渲染。如果我理解正确，那么您可以在右侧使用display:none。然后，在媒体查询中，可以将左侧的内容设置为“显示：无”，将右侧的内容设置为“显示：初始”。如果我没弄错的话，那就行了。这样就不会为隐藏元素分配空间

例如：

.leftDiv {
   display: initial;
}

.rightDiv {
   display: none;
}

@media screen only and (max-width: 1000px) {

.leftDiv {
   display: none;
}

.rightDiv {
   display: initial;
}

---

这些问题有点矛盾：）

---

首先，现在是2016年，如果你说的是具有响应性的布局、对手机、平板电脑和台式机的支持，那么它们将支持JavaScript，所以你不必担心这是你第2个问题的答案。没有JS的用户比例非常低，如下所示：您确定单纯使用CSS无法实现您的目标吗？或者选项3：根据需要使用CSS媒体查询来定位它们。“内容/图像仍然会呈现，即使隐藏”什么？如果它们是隐藏的，则不会渲染它们。不过它们已经上膛了。@Teemu是的，对不起，我就是这么想的meant@JamesThorpe是的，因为我应该从左向右移动一些元素sidebar@destripet，我用链接给出了广泛的答案。我强烈鼓励您尝试Twitter Boostrap的响应工具。它们提供了强大的工具，用于制作响应性布局，首先考虑移动设备。您可以实现相同的结果，进行您自己的CSS媒体查询，但使用Bootstrap，您将更快地了解如何实现它。谢谢！我将查看这些链接，并认为我将使用javascript aproach:）@destripet作为提示：检查网格系统部分、列顺序和响应部分。你会很容易达到你想要的