Как переместить элемент на странице?

Question

[Даниил]

Есть некая html структура:

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

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

И таких элементов несколько.
Мне нужно при определенном действии, например изменении ширины экрана, перемещать одни из элементов таким образом:

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

Пробовал использовать detach с append. Получается так, что все элементы с указанным классом копируются в указанный див в каждом блоке. Т.е. получается такая хрень:

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

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

и т.д.

Answer 1

[Даниил]

Нужно перебирать все элементы .parent в цикле и там уже совершать нужные манипуляции.

Answer 2

[Виталий]

используйте

$('.parent').each(function(){
$(this).find('.child1') .....
})

тогда элементы будут перемещаться только в своем родителе

Answer 3

[Иван]

flexbox свойство order

Comments

[Даниил]

нужно обойтись без флекса