Изменить порядок div с CSS? Вставьте родителя 1 между детьми родителя 2

Question

Вот что у меня есть:

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

Вот что я хочу:

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

Возможно ли это только с помощью CSS или JavaScript (без jQuery)? Даже если HTML-код не перемещается, пока он будет отображаться в указанном порядке на странице, это будет идеально.

Answer 1

Чтобы это работало, я бы посоветовал вам удалить div.parent2 вокруг дочерних классов. Поэтому код становится

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

тогда вы можете использовать flexbox для этого

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

Answer 2

Вы можете сделать это с помощью Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Демонстрация:

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>

Примечание: Css предназначен только для лучшего внешнего вида

Answer 3

С 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'));