How to change DIV order by CSS

Issue

Suppose there is one parent div and five child divs. Now when we don't apply CSS they will be placed one below another.

How to change the position of 3rd div so that it can either be above 1st div or wherever I want to place it, it can be below 2nd div or 4th div. How can we do that using CSS?

Note - The HTML cannot be changed.

<div class="parent">
  <div class="child1">
    1
  </div>

  <div class="child2">
    2
  </div>

  <div class="child3">
    3
  </div>

  <div class="child4">
    4
  </div>

  <div class="child5">
    5
  </div>
</div>

Solution

You should use flex or grid box and then you able to change order of it's child elements. Take a look at this DOC page

/* this will make your container flex */
.parent {
  display: flex;
  flex-direction: column;
}

/* 
  change order of your child element 
  possible selectors:
    - class: .child3
    or
    - without child class: .parent > div:nth-child(3)
*/
.child3 {
  order: -1;
}

<div class="parent">
  <div class="child1">
    1
  </div>

  <div class="child2">
    2
  </div>

  <div class="child3">
    3
  </div>

  <div class="child4">
    4
  </div>

  <div class="child5">
    5
  </div>
</div>

Answered By - Yaroslav Trach