<div class="container">
<header class="item">Header</header>
<main>
<article class="item">Article</article>
<aside class="item sidebar-left">Left sidebar</aside>
<aside class="item sidebar-right">Right sidebar</aside>
</main>
<footer class="item">Footer</footer>
</div>
html {
background: #f6faff;
}
/*-- --*/
main {
display: flex;
flex-direction: row;
}
.item {
font-size: 1.5rem;
line-height: 1;
text-align: center;
padding: 3rem 1rem;
background: #dfeffd;
border: 3px solid #457fdc;
color: #457fdc;
margin: 6px;
}
.sidebar-left {
order: 1;
flex: 1;
}
article {
order: 2;
flex: 2;
}
.sidebar-right {
order: 3;
flex: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.