<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flexを使った3カラムのホームページ（順番並べ替えあり）</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
ヘッダー
</header>
<div class="contents">
<div class="main">
中カラム
</div>
<div class="right">
右カラム
</div>
<div class="left">
左カラム
</div>
</div>
<footer>
フッター
</footer>
</body>
</html>
body{
background-color: lightyellow;
color: #fff;
}
header, footer {height: 100px;}
header {
color: #000;
background: yellow;
}
footer{
background: black;
color: #fff;
/*clear: both;*/
}
.contents {
display: flex;
height: 200px;
}
.main {
background: red;
width: 60%;
order:2;
}
.left {
background: blue;
width: 20%;
order: 1;
}
.right {
background: green;
width: 20%;
order:3;
}