Поменять местами блоки при сужении браузера

[Konpolya]

Верстаю адаптивную версию сайта, нужно сменить местами два блока, проблема в том, что они находятся в разных контейнерах

<div class="вся страница">
      <div>
            <div class="first">
            </div>
            <div>
            </div>
      </div>
      <div class="second">
      </div>
</div>

Как мне поменять местами first и second при разрешении экрана менее 420px? и возврате обратно при расширении экрана более 420px

 

[eskadu]

сайт на bootstrap 4?

if (document.documentElement.clientWidth < 420) {

       var block_1 = $(".first");//ищем первый блок
       var block_2 = $(".second");//ищем второй блок

       $(".first").remove();//удаляем первый блок
       $(".second").remove();//удаляем второй блок

       $(".block_block_1").appendTo(block_1);//блок с классов в который нужно поместить первый блок
       $(".block_block_2").appendTo(block_2);//блок с классов в который нужно поместить второй блок
}

 

[Konpolya]

if (document.documentElement.clientWidth < 576) {
$('.post_blog').each(function () {
                var desc = $(this).find('.title');
                $(this).find('.title').remove();
                $(this).find('.blog_img').prepend(desc);
            });
}

Сайт без bootstrap, .post_blog это общий контейнер? что то не хочет работать

 

[eskadu]

постарался расписать код, посмотрите должно получится

 

[Konpolya]

А рационально ли это, если меня волнует каждый мегабайт?) я имею ввиду он будет прогружать эти блоки по два раза?

 

[Konpolya]

       var block_1 = $(".first");
       var block_2 = $(".second");

       $(".first").remove();
       $(".second").remove();

       $(block_1).appendTo('блок в который нужно вставить');
       $(block_2).appendTo('блок в который нужно вставить');

Немного нужно изменить код.
Но работает, если только изначально браузер размера менее 420px, а можно ли сделать, если он изменился до 420 пикселей?

 

[eskadu]

насчет скорости загрузки, нужно тестировать, смотря что там у вас за блоки

Но работает, если только изначально браузер размера менее 420px, а можно ли сделать, если он изменился до 420 пикселей?

Java script в данном случае срабатывает при загрузке страницы, если нужно что бы и при 420 срабатывало, то поставьте вместо <420 <421 и тогда будет работать на 420 включительно

 

[crycode]

Если вы верстаете адаптивно, то почему используете для этого js, а не css ?
Это можно сделать с помощью

@media

стилями.

 

[eskadu]

Если вы верстаете адаптивно, то почему используете для этого js, а не css ?
Это можно сделать с помощью

@media

стилями.

так как у вас блоки находятся в разных контейнерах с помощью css нет возможности поменять их местами, если бы у вас блоки были в одном контейнере (соседи) то можно было бы поменять их местами с помощью flexbox (display: flex)

 

[crycode]

так как у вас блоки находятся в разных контейнерах с помощью css нет возможности поменять их местами, если бы у вас блоки были в одном контейнере (соседи) то можно было бы поменять их местами с помощью flexbox (display: flex)

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