So I am having issues trying to swap divs 1 and 2 around on mobile.
Mobile the order should be divs 1, 2 and 3 stacked in that order.
Then above 768px, the order needs to be div 2 on the left set at 30% width. Then on the right divs 1 and 3 need to be stacked taking up the remainder on the right.
Not sure how I can do this. I did try it without the wrapper but I couldn't get it to work, this is the closest I have got.
Can anyone help me please?
.container { display: flex; flex-direction: column; gap: 10px;}@media (min-width: 768px) { .container { flex-direction: row; } .specs { flex: 0 0 30%; order: 1; } .content-buttons { flex: 0 0 70%; display: flex; flex-direction: column; gap: 10px; order: 2; } .content { flex: 1; order: 1; } .buttons { flex: 1; order: 2; }}/* Borders for visualization */.content {border: 1px solid red;}.specs {border: 1px solid green;}.buttons {border: 1px solid blue;}<div class="container"><div class="specs">2</div><div class="content-buttons"><div class="content">1</div><div class="buttons">3</div></div></div>