使用CSS对除法元素重新排序

我有一个网站，我正在努力扩展，使其更适用于平板电脑和手机。我在HTML中使用带有媒体选择器的样式表

我的HTML是这样的

  <div id="page">
    <div id='header'> ... </div>
    <div id='navigation'> ... </nav>
    <div id='content'> ... </div>
    <div id='footer'> ... </div>
  </div>
    

┌───────────────────#page──────────────────────┐
│ ┌──────────────────────────────────────────┐ │
│ │ header                                   │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────. ┌─────────────────────────────────┐ │
│ │nav   │ │ content                         │ │
: :      : :                                 : :
│ │      │ │                                 │ │
│ └──────┘ │                                 │ │
│          └─────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │footer                                    │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

我的

desktop.css

将

#导航

浮动到左侧，并设置宽度和左侧边距 查看

#内容

，使其远离

#导航

。这是一个固定宽度的布局-

#页面

具有固定的

宽度：55em

和

边距：2em自动

，因此它在窗口中居中。 到目前为止还不错

我希望我的手机布局像这样，在

#内容

和

#页脚

之间重新定位

#导航

┌───────────#page──────────────┐
│ ┌──────────────────────────┐ │
│ │header                    │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │content                   │ │
: :                          : :
│ │                          │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │navigation                │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │footer                    │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘

我希望这是一个更流畅的布局，随着用户调整窗口大小（或适应各种大小的手机屏幕等），它可以很好地压缩

我尝试了绝对定位的

#导航

，但它没有滚动到底部的长内容。内容因页面而异（obvs）

显然，我可以在HTML中更改div的顺序，但我想知道是否有可能在CSS中对div进行这种重新排序（就像在当前的ish手机中一样）

---

带有

desktop.css的最小代码段
（在评论中添加以下请求）


body{
字体系列：Arial、Helvetica、无衬线字体；
背景：灰色；
}
#页面{
背景：浅灰色；
宽度：55em；
利润率：2米自动；
}
#页眉、#导航、#内容、#页脚{
背景：白色；
填充：0.7em；
}
#导航，#内容，#页脚{
边缘顶部：1.5em；
}
#标题{
字号：3em；
字体大小：粗体；
颜色：绿色；
}
#航行{
浮动：左；
宽度：18%；
}
#导航ul{
列表样式：无；
左侧填充：0；
}
#内容{
宽度：70%；
剩余利润：24%
}
#内容：第一个孩子{
空白：nowrap；
字体大小：粗体；
文本对齐：右对齐；
}
#内容td{
填充：0.5em 0.2em 0；
垂直对齐：顶部；
}
#页脚{
文本对齐：右对齐；
}

布局和字体大小测试
站点名称

这里
那里
某处
别处
这里
那里
你
超越

欢迎访问站点名称！
日记
2015年6月18日18时30分
201509年7月1日上午9时00分
2015年8月9日18:00
临时劳工和福利费
麦格纳阿利夸。这是一个小小的节日
实习ullamco laboris nisi ut aliquip
乱数假文

多洛·希特·阿梅特，祝你好运
Elite，请暂时输入劳工和福利
麦格纳阿利夸。这是一个小小的节日
实习ullamco laboris nisi ut aliquip
ex ea commodo consequat。二人世界
用纤毛多洛雷卷曲的纤毛
欧盟福吉亚无法定权利。

乱数假文

多洛·希特·阿梅特，祝你好运
Elite，请暂时输入劳工和福利
麦格纳阿利夸。这是一个小小的节日
实习ullamco laboris nisi ut aliquip
ex ea commodo consequat。二人世界
用纤毛多洛雷卷曲的纤毛
欧盟福吉亚无法定权利。

&抄袭；版权所有RGB 2015
这件事做起来很简单，你必须考虑正常的HTML浮动。我假设您使用的HTML代码如下所示：

<div class="nav"></div>
<div class="content"></div>

.nav {float: left;}
.content {float: right;}

因此，HTML普通浮点将使.nav元素位于.content元素之前（在DOM中也是如此）

因此，简单地说：

<div class="content"></div>
<div class="nav"></div>



并使用相同的CSS（将.nav设置为向左浮动，将.content设置为向右浮动）

然后，在移动断点上，将它们都设置为
float:none

 <强>用纯CSS实现，可以使用FrasBox >，但是必须考虑它的实现：（IE10+）
 < P>这应该做< /P>
@media only screen and (min-width : 320px) and (max-width : 767px){
     #page {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            /* optional */
            -webkit-box-align: start;
            -moz-box-align: start;
            -ms-flex-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
     }
     #header {
            -webkit-box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
            -ms-flex-order: 1;
            -webkit-order: 1;
            order: 1;
     }
     #content {
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -ms-flex-order: 2;
            -webkit-order: 2;
            order: 2;
     }
     #navigation {
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
            -ms-flex-order: 3;
            -webkit-order: 3;
            order: 3;
     }
     #footer {
            -webkit-box-ordinal-group: 4;
            -moz-box-ordinal-group: 4;
            -ms-flex-order: 4;
            -webkit-order: 4;
            order: 4;
     }
}

你能创建一个你迄今为止试过的小提琴演示吗？@Etash:Snippets已添加。迈克尔的回答让我走上了正确的道路。不过，caniuse.com看起来非常有用。谢谢