Change the order of column using css

Issue

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 class="div-container">
  <div class="div-item">1</div>
  <div class="div-item">2</div>
  <div class="div-item">3</div>
  <div class="div-item">4</div>
  <div class="div-item">5</div>
</div>

Solution

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; }

Answered By - mir hamza