Reorder divs with CSS? Insert parent 1 between children of parent 2

Question

This is what I have:

<div class="container>
    <div class="parent1"></div>
    <div class="parent2">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</div>

This is what I want:

<div class="container>
    <div class="parent2">
         <div class="child1"></div>
              <div class="parent1"></div>
         <div class="child2"></div>
    </div>
</div>

Is this possible with only CSS or JavaScript (no jQuery)? Even if the HTML doesn't move, as long as they appear in that order on the page that would be perfect.

Both are possible, but it deppends what you are trying to achive. JS can change the html strcuture as you want. But if you want only css, it depends on the expected output — Gerardo BLANCO, Jul 02 '18 at 16:10
https://stackoverflow.com/questions/41424994/how-to-add-a-div-between-two-divs-by-javascript — abney317, Jul 02 '18 at 16:14

score 1 · Answer 1 · answered Jul 02 '18 at 16:18

With Javascript:

//Remove the parent 1 div from the container div
 document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);

//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

score 1 · Answer 2 · answered Jul 02 '18 at 16:19

To make this work, I would advise that you remove the div.parent2 around the child classes. Therefore the code becomes

<div class="container parent">
 <div clas="parent1"></div>
 <div class="child1"></div>
 <div class="child2></div>
</div>

then you can use flexbox to do this

.parent{display: flex};
.child1{order:1}
.parent1{order:2}

score 1 · Accepted Answer · answered Jul 02 '18 at 16:39

You can do it with Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Demo:

function reorder() {
  document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}

.container * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
.parent1 {
  color: red;
  border-color: red;
}
.child1 {
  color: blue;
  border-color: blue;
}

<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
    I'm parent 2!
         <div class="child1 ">I'm child 1!</div>
         <div class="child2 ">I'm child 2!</div>
    </div>
</div>
<button onclick='reorder();'>Reorder!</button>

Note: Css is only for better looks

Reorder divs with CSS? Insert parent 1 between children of parent 2

3 Answers3