css - 如果手机，在内容 div 下显示我的两个侧边栏？

Question

我的模板上有两个侧边栏，在台式计算机上的输出将如下所示:

<!--sidebar one--><!--content--><!--sidebar two-->

喜欢 This Fiddle .这看起来正是我想要的。

我的桌面布局代码:

<div class="wrapper">
<div class="sidebar_one">Sidebar one</div>
<div class="content">This is a content</div>
<div class="sidebar_two">Sidebar two</div>
</div>

现在在手机上，我想将我的两个侧边栏放在我的内容 div 下。

所以输出看起来像这样:

<!--content-->
<!--sidebar one-->
<!--sidebar two-->

喜欢 This Fiddle

现在我的问题是我不知道如何在不将我的 HTML 代码更改为以下内容的情况下将我的边栏放置在我的内容下方:

 <div class="wrapper">
 <div class="content">This is a content</div>
 <div class="sidebar_one">Sidebar one</div>
 <div class="sidebar_two">Sidebar two</div>
 </div>

显然，这在手机上看起来很棒，但在台式电脑上，我的侧边栏仍然在我的内容 div 下。

所以我的问题是:是否可以以某种方式调整我的第一个代码 First Fiddle在中间显示我的内容，一个侧边栏在左边，另一个在右边，对于台式电脑，对于手机，在我的内容下方显示我的两个侧边栏？

Answer 1

使用 CSS3 flex 可以做到这一点。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes .

因此，在您的手机媒体查询中，您可以将元素移动到您想要的任何顺序。

所以在你的父元素上你有

   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;

在你的子元素上你有你的移动媒体查询

-webkit-order: 1;
        order: 1;

在你的子元素上你有桌面媒体查询

-webkit-order: 3;
        order: 3;

唯一的问题是浏览器支持。但是检查不支持浏览器的 polyfils。

我也添加到你的 fiddle 中给你举个例子http://jsfiddle.net/UBb7j/3/