61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
qq_36735468 2017-12-11
- 打赏
- 举报
bootstrap
qq_40730245 2017-12-10
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<style>
body{display:flex;flex-flow:row wrap;text-align:center;}
body > *{flex:1 100%;} header,footer{background:tomato;} article{background:deepskyblue} aside{background:gold} section{background:hotpink}
@media all and (min-width:600px){aside,section{flex:1 auto}}
@media all and (min-width:800px){article{flex:2 0px} aside{order:1}
article{order:2}
section{order:3}
footer{order:4}}
</style>
</head>
<body>
<header>头部</header>
<article>中部</article>
<aside>左边</aside>
<section>右边</section>
<footer>底部</footer>
</body></html>
