使用JS复制HTML或移动元素以响应响应的站点

Question

我在网站/移动设备上工作和设计的网站要求我移动元素（从左侧边栏到右侧，更改顺序等）。这些元素包括简单的文本和图像（非常小，徽标）。

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

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

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

非常感谢在这种情况下对最佳做法的一些意见。

这是我想要实现的目标：

Answer 1

这些问题有点矛盾：）

首先，它在WEB中的 2016 ，如果你说的是具有响应式布局，支持手机，平板电脑，桌面 - 他们将获得JavaScript支持，所以你不应该＆不用担心。 - 这是你问题编号＃2的回答。没有JS的人的比例非常低，低于＆lt; 1％。

CSS媒体查询足以提供良好的响应能力。有时您需要使用JS添加辅助方法来操作DOM并使其更高级。 您可以查看they do responsiveness with classes in Twitter Bootstrap的方式。

有时内容会在HTML中重复出现，但是一旦因为CSS媒体查询的可见性规则而无法在屏幕上同时显示内容 - 不会对SEO造成任何伤害

根据检测到的用户代理，可以稍微复杂化一些事情RESS: Responsive Web Design + Server-Side Components，并提供不同的HTML布局。

Answer 2

你提到你不愿意使用display：hidden因为它们被呈现的东西。如果我理解正确，那么你可以在右侧使用display：none。然后在您的媒体查询中，您可以在左侧设置内容以显示：none和右侧显示的内容：initial。如果我理解正确，这应该工作得很好。然后不会为隐藏元素分配空间。

例如：

.leftDiv {
   display: initial;
}

.rightDiv {
   display: none;
}

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

.leftDiv {
   display: none;
}

.rightDiv {
   display: initial;
}