Html 为响应页面避免重复内容

我目前正在做一个项目，处理响应性设计，整个布局应该使用HTML和CSS实现。我知道可以使用java脚本将内容从一个列布局移动到另一个列布局，而不复制内容，但使用HTML和CSS是否也可以实现同样的效果

以下面的示例为例，它将在桌面设计中呈现为这样的效果

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |
|  --------  --------   |
-------------------------

但随后，设计师在移动设计中将

div1

移动到

div2

下方

--page--------
|  --------  |
|  |div 2 |  |
|  --------  |
|  --------  |
|  |div 1 |  |
|  --------  | 
--------------

显然，块级元素堆叠的自然方式与此相反

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |  <--- shown on desktop
|  --------  --------   |
|  --------             |
|  |div 1 |             |  <--- hidden on desktop
|  --------             |
-------------------------

--page--------
|  --------  |
|  |div 1 |  | <--- hidden on mobile
|  --------  | 
|  --------  |
|  |div 2 |  | <--- shown on mobile
|  --------  |
|  --------  |
|  |div 1 |  | <--- shown on mobile
|  --------  | 
--------------

——第页-------------------
|  --------  --------   |
|| div 1 | | | div 2 | | | |如果div是可预测的大小（例如50em），您可以使用
位置：相对
和负
顶部
值对其进行偏移。这将允许您在不更改标记的情况下提供重新排序的流的外观

例如：

#div1 {
    float: left
    clear: both;
    height: 50em;
    position: relative;
    top: 50em;
}

#div2 {
    float: left
    clear: both;
    height: 50em;
    position: relative;
    top: -50em;
}

把它放在媒体查询中，它会给你想要的结果。
当然，决斗内容是最好避免的问题。我们应该始终创建任何高度的元素，以允许CMS内容

我建议加价顺序应为：

--page--------
|  --------  |
|  |div 2 |  |
|  --------  |
|  --------  |
|  |div 1 |  |
|  --------  | 
--------------

。。。如设计师在移动布局中所指定。宽度往往比高度更容易知道，所以在桌面上，你可以用“老开关”来改变它们的位置。Clearfix是隐含的。例如，在桌面上：

.div1, .div2 {
  float: left;
  position: relative;
  width: 200px;
}
.div2 {
  right: -200px;
}
.div1 {
  left: -200px;
}

。。。这将为您提供以下布局：

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |
|  --------  --------   |
-------------------------

（我没有检查这段代码——很可能我的左右两边都搞错了）

这有意义吗？
如果您隐藏和取消隐藏元素，SEO的重复内容对于响应页面来说是一个真正的问题。代码仍然在DOM中呈现，如果搜索引擎可以看到代码（即使用户看不到输出），它仍然会对您不利。上面的答案都不能提供一个真正的解决方案，老实说，我现在也不能

我正朝着用javascript从DOM中删除元素的方向发展，但这会变得非常混乱，也不理想

上面的媒体查询答案不会改变这样一个事实，即仍然有HTML输出到DOM中，内容重复。
我知道我迟到了，但我希望这对其他人有所帮助

我会先把它当作移动设备来解决
#div1
应该是移动分辨率中显示的第一个，而
#div2
应该是第二个

然后我会让它们都向右浮动，所以当需要时，“第一个”将显示在右侧

下面是一个示例（最好在整页中查看以查看响应性）：


*{框大小：边框框；}
div{边框：1px实心灰色；}
#div1{背景：浅蓝色；}
#div2{背景：黄色；}
@介质（最小宽度：768px）{
div{
显示：内联块；
宽度：50%；
浮动：对；
}
}

此div将显示在移动分辨率的顶部，并在任何其他分辨率的右侧

我们可以说，它将成为手机的主要内容持有者，而台式机的次要内容持有者

此div将在移动分辨率的底部显示，在任何其他分辨率的左侧显示

我们可以说，它将成为台式机的主要内容持有者，而手机的次要内容持有者


CSS
order
属性可用于对
flex
子级进行重新排序
Bootstrap4引入了一些（响应性）flex实用程序，您可以使用它们来更改flex子级的顺序


第一组
第2组

考虑上面基于引导的代码段
div 1
和
div 2
以源代码顺序出现在
sm
和更高版本（md、lg、xl）的设备上，而
div 2
在
xs
设备上出现在
div 1
之前。您可以使用CSS Flexbox的order属性执行此操作：假设您的标记是：


.my flex容器{
显示器：flex；
}
/*设备上的变更单简而言之，有时是。这在很大程度上取决于你试图做出什么样的改变。您是否有任何问题？如果没有脚本语言（如javascript），您无法修改
DOM（移动内容）
，只能使用
css
显示或隐藏，但在这种情况下，您必须复制不需要的内容。您可以使用Flexbox（）满足您的需要。您有什么理由不能将
div 2
的标记放在
div 1
之前，然后将
div 2
浮动到桌面的右侧而不是左侧？（Bootstrap有一个类专门用于这种场景：
.pull right
）我写这篇文章已经有几个月了，我可以说很多框架都使它变得非常简单。Bootstrap 3允许推拉列和div，这使得隐藏内容变得不必要。我在重组内容方面取得了很好的效果，所以在崩溃时没有隐藏任何东西（应该是这样的）。