How to swap blocks 2 and 3 on a small screen? Without duplicating HTML tags, and the desktop layout of the blocks is not broken. No position absolute.
.wrap { display: flex;}.col { flex-grow: 1;}.el { flex-grow: 1; text-align: center; font-size: 50px; display: flex; align-items: center; justify-content: center;}.one { height: 200px; background-color: #8BAFED;}.two { height: 500px; background-color: #FEDDCC;}.three { height: 400px; background-color: #FF7100;}@media (max-width: 600px) { .wrap { flex-direction: column; }}<div class="wrap"><div class="col"><div class="el one">1</div><div class="el two">2</div></div><div class="col"><div class="el three">3</div></div></div>There should be no empty space between block 1 and 3 on the big screen