css - 如何在页面的不同部分 float 一个媒体查询

Question

图片如下:

顶部的导航栏，页面两侧(左侧和右侧)的侧边栏和夹在这些边之间的内容 div。在桌面上一切看起来都很棒。

为移动 View 的单列布局输入媒体查询。现在布局是 Nav，左侧边栏在下方，内容在其下方，右侧边栏在内容下方。

我的问题是如何在移动媒体查询的左侧边栏下方获取右侧边栏，但在桌面 View 中将其保持不变，而不触及标记并仅更改 CSS。这是一个指向 fiddle 的链接，以显示我的意思:

Fiddle

桌面布局的一切都在

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

CSS block 。

Answer 1

我知道您要求“仅更改 CSS”。所以首先也许有一个新的 css 的解决方案 order功能。但是为什么不使用更简单的方法来稍微更改标记 ( DEMO )。

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

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

.sidebar {
    width: 20%;
}

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

.sidebar_right {
    float: right;
}

.sidebar_left {
    float: left;
}

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

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