here is the challenge I'm trying to figure out. I need to swap A - B and E - F divs in reverse order using css, but C - D leave as it is.
Here is the code I'm using JSfiddle
<style> .column div { display: block; border: 1px solid red; margin: 0 auto 20px; text-align: center; width: 300px; } </style> <div class="column"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> </div> As other's have mentioned already, you could try leveraging the CSS property order inside a container with display: flex. By default elements are rendered in the order they appear in the document but you can change the ordering through that property.
.column { display: flex; flex-direction: column; } .column > div { display: block; border: 1px solid red; margin: 0 auto 20px; text-align: center; width: 300px; } .column > div:nth-child(2) { order: -1; } .column > div:nth-child(5) { order: 1; }<div class="column"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> </div>You can always check A Complete Guide to Flexbox for more explanation on the CSS flexbox.
flexbox+flex-orderwill solve your problem