Change the order of column using css-CodePudding

I have 5 items and I want to change the order of these div-items like I have items (1,2,3,4,5) and I want to change the order like(3,5,1,2,4)

Here is my code:

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
</div>

CodePudding user response：

You can use flex properties like

.div-container {
  display: flex;
}

.div-item:nth-of-type(1) { order: 3; }
.div-item:nth-of-type(2) { order: 4; }
.div-item:nth-of-type(3) { order: 1; }
.div-item:nth-of-type(4) { order: 5; }
.div-item:nth-of-type(5) { order: 2; }