仅在小屏幕上更改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>

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

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

Answer 1

您可以玩float：

例如： https : //jsfiddle.net/3f1s70er/1/

当某个元素在流中排第二，但具有float: left而元素在流中排第一，但具有float: right -那么这些元素具有不同的顺序。

Answer 2

我用命令 。 感谢帮助

Answer 3

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

参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3.org/TR/css3-mediaqueries/