CCS3 flexbox - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CCS3 flexbox - 自学教程(runoops.com)</title>
    <style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
        }

.flex-container>* {
            padding: 10px;
            flex: 1 100%;
        }

.main {
            text-align: left;
            background: cornflowerblue;
        }

.header {
            background: coral;
        }

.footer {
            background: lightgreen;
        }

.aside1 {
            background: moccasin;
        }

.aside2 {
            background: violet;
        }

@media all and (min-width: 600px) {
            .aside {
                flex: 1 auto;
            }
        }

@media all and (min-width: 800px) {
            .main {
                flex: 3 0px;
            }

.aside1 {
                order: 1;
            }

.main {
                order: 2;
            }

.aside2 {
                order: 3;
            }

.footer {
                order: 4;
            }
        }
    </style>
</head>

<body>

<div class="flex-container">
        <header class="header">头部</header>
        <article class="main">
            <p>
                自学教程(runoops.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。
            </p>
        </article>
        <aside class="aside aside1">边栏 1</aside>
        <aside class="aside aside2">边栏 2</aside>
        <footer class="footer">底部</footer>
    </div>

</body>

</html>