仅在小屏幕上更改div顺序

Question

我在小屏幕上遇到订单div的问题。 我的代码：

<header>
    <nav>...</nav>
</header>

<div id="main">
    <section id="slider">...<section>
    <section id="new_articles">
        <article>...</article>
        <article>...</article>
        <article>...</article>
        <article>...</article>
    <section>
</div>

<aside>
    <section id="calendar">...<section>
    <section id="ads">...<section>
    <section id="forum">...<section>
</aside>

<footer>...</footer>

我想按顺序显示： 标头 2.滑块 3.日历 4.广告 5.新文章 6.论坛 7.页脚

我应该改变什么？ “滑块”，“新文章”和“论坛”都有动态高度

Answer 1

你可以玩浮动：

以下是示例：https://jsfiddle.net/3f1s70er/1/

如果某个元素在流中是第2个，但是float: left和元素在流中是第1个，但是float: right - 那么这些元素的顺序不同。

Answer 2

我使用了order。谢谢你的帮助

Answer 3

您可以使用媒体查询使其响应

参见：
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3.org/TR/css3-mediaqueries/