Как поменять местами выделенные ячейки ?

[lsalex144]

Привет!

Есть ячейки с двумя значениями:
1- </div>; (красный)
2 -<div *>; (синий)

Нужно поменять их местами так чтобы: красные ячейки( сверху в низ ) по очереди ( есть условные уровни которые помогут легче понять "по очереди") менялись с синими местами.
Показал на картинке пример ( полоски - это ячейки).

Дело в том что <div> нужно закрывать </div>. После того как сгенерировал html код, я их перевернул, и </div> уровни оказались сверху. Теперь их нужно поставить на место, так что бы уровни вложенности сохранились.

Всем спасибо за уделённое мне время!