如何在页面的不同部分浮动一边进行媒体查询

Question

想象如下：

顶部的导航栏，页面两侧的侧边栏（左侧和右侧）以及夹在这些旁边的内容div。桌面上的一切看起来都很棒。

为移动视图的单个列布局输入媒体查询。现在布局是导航，左侧边栏，下面的内容和内容下的右侧边栏。

我的问题是如何在移动媒体查询的左侧边栏下方获得右侧边栏，但不要触及桌面视图，而不触及标记，只更改CSS。这是一个小提琴的链接，以显示我的意思：

Fiddle

桌面布局的所有内容都在

之内

@media only screen and (min-width: 768px) { }

CSS阻止。

Answer 1

我知道您已经要求“仅更改CSS ”。首先，可能有一个新的css order功能的解决方案。但是，为什么不使用更简单的方法只更改标记（DEMO）。

在下面的示例中，我删除了不需要的所有代码，以便在您的小提琴中演示解决方案。

您可以在内容元素之前移动右侧边栏，然后在桌面模式下左/右浮动它们。

.sidebar {
    width: 20%;
}

.content {
    width: 60%;
    float: left;
}

.sidebar_right {
    float: right;
}

.sidebar_left {
    float: left;
}

在移动模式下，您移除浮动，以便3个元素返回其原始“标记位置”。

@media only screen and (max-width: 768px) {    
    .sidebar, .content {
        float: none;
        width: 100%;
    }
}