CSS : How to do the reverse of line wrapper - html

Question

After some search, i don't find how to do the reverse of this,
I'll give a height, and the second div is under the first and the third div is on the right.
https://jsfiddle.net/qq3n52vg/
.wrapper {
border: 1px solid black;
width: 30px;
}
.left {
border: 1px solid red;
display: inline;
}
<div class="wrapper">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>
Thanks

Answer 1

You can use a flexbox that wraps in the column flex-direction - see demo below:
.wrapper {
border: 1px solid black;
height: 40px;
display: flex; /* Define a flexbox*/
flex-wrap: wrap; /* Allow wrapping*/
flex-direction: column; /*Column direction*/
align-items: flex-start; /* Override default stretching*/
align-content: flex-start; /* aligning wrapping lines */
}
.left {
border: 1px solid red;
display: inline;
}
<div class="wrapper">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>

Answer 2

More to kukkuz answer. For further reading about Flexbox
flex-direction
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row (default): left to right in ltr; right to left in rtl
row-reverse: right to left in ltr; left to right in rtl
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top