Reverse div order multiline

Question

I'm trying to get the following result with CSS.

I want the first div to start at the bottom right. When adding a second div or third div, it needs to place itself needly next to the former div on the left side like so:

| div 3 | div 2 | div 1

Consider having a wrapper div that wraps the next div following divs (div 4, 5 , and 6). Normally the divs would go with the flow of the document and go under the first three divs. I want it the other way round like this:

                | div 7
| div 6 | div 5 | div 4
| div 3 | div 2 | div 1

How can I achieve this?

Answer 1

I feel a bit dumb figuring out my own problem in minutes, while stumbling on this problem beforehand for hours, but I was looking over flex-wrap: wrap-reverse. The wrap-reverse was important here. The outcome was actually pretty simple with the following code:

  .container {
    width: 700px;
    margin: 0 auto;
    border: 1px solid coral;

    display: flex;
    flex-direction: row-reverse;
    align-content: end;
    flex-wrap: wrap-reverse;
}

Hope to help others with it!