(Desired outcome: https://i.sstatic.net/CUJuwwbr.png)
I'm looking for a solution where the 4th box goes beneath the 2nd and then the 3rd below the 4th (new position) when resizing the window horizontal. The 1st box should stay the same width.
I tried putting a container around 2-4 with flex-wrap, but the 1st box gets resized.
.container { display: flex; margin: auto; max-width: 1250px; min-width: 630px;}.content { display: flex; width: 300px; height: 300px;}.content_container { display: flex; flex-wrap: wrap;}<div class="container"><div class="content">1</div><div class="content_container"><div class="content">2</div><div class="content">3</div><div class="content">4</div></div></div></div>