Как отменить .appendTo и другое?

Question

[BratCor]

В общем при размере окна меньше 600px скрипт перемещает блок с одного места в другое.
Но когда делаешь ресайз обратно, что бы окно стало больше 600px, то перемещённый блок не возвращается обратно на место( Он вернётся только если перезагрузить страницу.
Вопрос в том, как заставить вернутся блок обратно? Желательно как-то отменить скриптом все .appendTo, а не прописывать каждому его положение по умолчанию, так как в реальном проекте их много.

Для наглядности прикрепляю пример и видео

Пример: https://jsfiddle.net/3ve8pyk9/
Видео: https://youtu.be/uCtBrzFG-BU

Comments

[Антон Швец]

для таких вещей не нужен js. css grid и media query и вперед

[BratCor]

Антон Швец, вёрстка сделана на bootstrap, и всё что может css это максимум перемещать блок внутри родителя через свойство order. По этому прибег к JS

Answer 1

[Антон Усачев]

Ну как минимум так:

if (window.matchMedia('(max-width: 600px)').matches) {
    $('.block__1').appendTo('.wr__2');
} else {
    $('.block__1').appendTo('.wr__1');
}

А по-хорошему, нужно на старте парсить блоки и давать им, например, какой-то дата-атрибут, куда прописывать стартовые (текущие) значения, с которыми уже сравнивать состояние при изменении ширины экрана.

Comments

[BratCor]

Способ который вы показали в примере не хотелось бы использовать, так как в скрипте много таких .appendTo , .insertAfter и всего такого.
Прописывать вручную обратное положение каждого как-то лень.
Думал может есть какой-то способ через else отменить все .appendTo и .insertAfter

[BratCor]

какой-то дата-атрибут, куда прописывать стартовые (текущие) значения

А можете показать пример на коде что я дал, хотя бы с одним блоком и дата атрибутом?

[Антон Усачев]

BratCor, да, сейчас набросаю.

[BratCor]

Антон Усачев, буду признателен

[Антон Усачев]

[BratCor]

Антон Усачев, ого, благодарю! пойду разбираться)

Answer 2

[ivan386]

Я бы без JS решил так.

html:

<div class="wr">
  <div class="block block__6">БЛОК 6</div>
  <div class="block block__5">БЛОК 5</div>
  <div class="block block__4">БЛОК 4</div>
  <div class="block block__3">БЛОК 3</div>
  <div class="block block__2">БЛОК 2</div>
  <div class="block block__1">БЛОК 1</div>
  </div>

css:

.wr {
  display: flex;
  flex-flow: wrap-reverse;
  flex-direction: row-reverse;
}

.block {
  width: 33%;
}

@media (max-width: 600px){
  .block {
   width: 25%; 
  }
  .block__1 {
    order: -1;
  }
}

demo: https://jsfiddle.net/t6a9Lbju/2/

Comments

[BratCor]

Спасибо, такое решение я знаю.
Но код который я дал это только пример, в реальном коде структура гараздо сложнее , и перемещением дочерних блоков внутри одного родителя ни как не обойтись.