CSS change block order

by yodapt

HTML

<div class="container">
    <section>section</section>
    <article>article</article>
    <aside>aside</aside>
</div>

CSS

*, *:after, *:before {
	position: relative;
	box-sizing: border-box;
}

.container { display: table; width: 100%; }

aside, section, article {
    display: table-cell;
    width: 33.33%;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}

section {
    background: #1abc9c;
}

article {
    background: #2ecc71;
}

aside {
    background: #3498db;
}

@media only screen and (max-width: 400px) {

    aside { display: table-footer-group; }    
    article { display: table-header-group; }
    section { display: table-row-group; }
    
}