So I have a scenario like this. On Desktop mode, this is how the divs should be stacked. The div 2, 3 and 4 are stacked beside the div containing 1 and 5.
.container{ display: flex;}.container div{ width: 150px; height: 50px; display: flex; align-items: center; justify-content: center;}.sub-container{ flex-direction: column;}.div1{ background: red;}.div2{ background: yellow;}.div3{ background: green;}.div4{ background: blue;}.div5{ background: grey;}@media screen and (max-width: 480px) { .container{ flex-direction: column; }}<div class="container"><div class="sub-container"><div class="div1">1</div><div class="div5">5</div></div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>But on mobile screen-size (480px), the div 2, 3 and 4 should align vertically between div 1 and 5. Currently you see they are staked below the div 1 and 5. I want them in-between. Can I achieve this with flex-box? I don't wish to use grid layout.
I can't use order as div 1 and div 2 are part of the same group (.subcontainer).
So I have already seen the question with which this is marked as duplicate. However, that is not the same as this. Here div 1 and div 5 are two separate div and it's not just the same div with a bigger height.