CSS - Place new DIVs on top of old DIVs - html

Question

I am trying to use "vertical-align: bottom;" to have DIVs go from the bottom of the wrapper/parent DIV to the top. The only problem is that I would like the first DIVs to be displayed at the bottom, NOT at the top like they usually are by default. This is only because I always want the bottom row to be full by having the first ones entered at the very bottom.
The order of the DIVs are not actually essential but I really want the very bottom "row" to be completely filled with the top row the only one which sometimes will only have 1 or 2 boxes on top for example. By adding new boxes on the top rather than at the bottom it would result in the layout I've described. I hope that makes sense.
Also the code I have added below shows gaps in between each "column" which I have been trying to remove. It might not matter if I have to change all the code to fix the first problem but if anyone knows why this is and lets me know, that would be great :)
Thanks!
Here is what I have so far:
div.wrapper {
display: table-cell;
vertical-align: bottom;
height: 500px;
width: 640px;
background-color: lightgrey;
}
div.wrapper div {
width: 200px;
height: 50px;
display: inline-block;
}
div.wrapper div p {
margin: 0px;
padding: 0px;
}
<div class="wrapper">
<div style="background-color: #7E7ECC;">
<p>1</p>
</div>
<div style="background-color: #FFA347;">
<p>2</p>
</div>
<div style="background-color: #80E680;">
<p>3</p>
</div>
<div style="background-color: #FF99C2;">
<p>4</p>
</div>
<div style="background-color: #A6DBEE;">
<p>5</p>
</div>
</div>
And this is what I want to create:
This would also be acceptable:

Answer 1

You can do it with CSS3 flexbox layout. flex-wrap: wrap-reverse is the key property here as it allows the items to wrap in opposite direction of the flex-direction: row
align-content: flex-start is used instead of *-end since the wrap order was reversed.
div.wrapper {
/* Added Properties */
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
align-content: flex-start;
/* ^ Added Properties */
background-color: lightgrey;
height: 150px;
vertical-align: bottom;
width: 640px;
}
div.wrapper div {
width: 200px;
height: 50px;
display: inline-block;
}
div.wrapper div p {
margin: 0px;
padding: 0px;
}
<div class="wrapper">
<div style="background-color: #7E7ECC;">
<p>1</p>
</div>
<div style="background-color: #FFA347;">
<p>2</p>
</div>
<div style="background-color: #80E680;">
<p>3</p>
</div>
<div style="background-color: #FF99C2;">
<p>4</p>
</div>
<div style="background-color: #A6DBEE;">
<p>5</p>
</div>
</div>

Answer 2

You can solve this problem adding flex layout to wrapper and display items in row, which you want to reverse it to get the stacking effect. See the css below:
div.wrapper {
display: table-cell;
vertical-align: bottom;
height: 500px;
width: 640px;
background-color: lightgrey;
display: flex; /* added */
flex-direction: row; /* added */
flex-wrap: wrap-reverse; /* added */
align-content: flex-start; /* added */
}
div.wrapper div {
width: 200px;
height: 50px;
display: inline-block;
}
div.wrapper div p {
margin: 0px;
padding: 0px;
}
Here is a FIDDLE