CSS/Responsive/Mobile: Left/Right 侧边栏在内容之后虽然在 HTML 中是第一？

Question

您好，请问是否有解决以下问题的NICE方案：

<div id="container">
<div id="left_sidebar">blablabla</div>
<div id="right_sidebar">blablabla</div>
<div id="main_content">blablabla</div>
</div>

在网站的桌面版中，CSS 类似于：

#main_content {
margin: 0 auto;
width: 45%;
}

#left_sidebar {
float:left;
width:25%;
}

#right_sidebar {
float:right;
width:25%;
}

在mobile/responsive版本中，目的是让主要内容放在第一位。但是 HTML 的 顺序不应更改 （我知道有解决方案）。是否可以使用 pure CSS（在媒体查询中）让 main_content 在移动版本中出现在 left_sidebar/right_sidebar 之前？

Answer 1

好吧，我终于在 Whosebug 上找到了另一个主题来处理同样的问题。那里提供的解决方案应该正是所需要的。

Switching the order of block elements with CSS