Flexbox

flexbox direction

HTML

<section>
 <article>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</article>
<article>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</article>
<article>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</article><article>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</article>
<article>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</article>
<article>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</article>

CSS

article {
 	display: flex;   
}
article:nth-of-type(2){
    flex-direction: row;
}
article:nth-of-type(4){
    flex-direction: row-reverse;
}
article:nth-of-type(5){
    flex-direction: column; float: left; margin-top:0;
}
article:nth-of-type(6){
    flex-direction: column-reverse;
}
article:nth-of-type(2) div:nth-of-type(2){
    order: -1;
}article:nth-of-type(3) div:nth-of-type(3){
    order: -1;
}

div {width: 50px; outline: 1px solid; text-align:center;}
article {margin: 10px;}