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