边栏有时高于，有时低于响应式设计中的内容

Question

我有一个网站，有时侧边栏中的内容是网站中最重要的内容，因此在这些页面上，侧边栏必须放在响应式设计中的其他内容之上。 在其他页面上，侧边栏必须放在其他内容下方。

通过在html中切换div的顺序来解决这个问题非常容易，但我认为这不是一个干净的解决方案。我认为搜索引擎在不同页面上看到完全不同的div顺序可能看起来很奇怪。 这就是我的意思：

<div id="container">
    <div id="content">content</div>
    <div id="sidebar">sidebar</div>
</div>

和

<div id="container">
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
</div>

小提琴链接：http://jsfiddle.net/YEUwN/107/和http://jsfiddle.net/YEUwN/108/

所以我正在寻找一种不同的解决方案，其中html对于两个排序都是相同的。这有可能用css作为例子吗？

Answer 1

您可以使用Flexbox使用CSS3执行此操作。 Read more here，Can I use

<强> Working Demo

您可以根据需要更改弹性顺序。

CSS

 #container {
    display: flex;
    flex-flow: row wrap;
}
#sidebar {
 width: 100%;
 order: 1;
}

#content {
 width: 100%;
 order: 2;
}