перенос элемента из одного блока в другой при изменении размера экрана

[green-vik]

Всем доброго времени суток!

к примеру мы имеем следующий код:

<div class="1">
  <div class="2">
    тут текст какой либо
  </div>
</div>

<div class="3">
  и тут текст
</div>

скажем что DIV="1" фиксирован и всегда на виду, а вот  DIV="3" виден лишь тогда когда разрешение экрана меньше чем 480рх и также имеет фиксированное положение но внизу.

теперь суть вопроса, возможно ли реализовать и если да то как чтобы  DIV="2" при разрешении экрана свыше 480рх был в блоке  DIV="1" , а при разрешении меньше 480рх в перемещался в блок  DIV="3" .

Есть вариант конечно прописать в обоих блоках html код DIV="2" , а потом манипулируя display:none показывать, но если в данном (DIV="2") кода много то получится захломление страницы дублирующемся и по сути дважды не нужным кодом.

надеюсь подскажите, всем заранее спасибо

[Switch74]

вижу вариант только с js, при изменении размеров переносить блок.
А вообще зачем такоей ход, если DIV=1 у вас всегда видимый
И возможно есть смысл увидеть как это все должно выглядеть, возможно изменив саму верстку можно будет добиться этого эффекта

[green-vik]

7 минут назад, Switch74 сказал:

вижу вариант только с js, при изменении размеров переносить блок.
А вообще зачем такоей ход, если DIV=1 у вас всегда видимый
И возможно есть смысл увидеть как это все должно выглядеть, возможно изменив саму верстку можно будет добиться этого эффекта

кода пока нет, а ход нужен для того что скажем в верхнем блоке DIV="1" у нас например поиск, навигация и логин панель, но скажем для телефона этот формат не удобен и хочу при маленьких размерах логин панель вниз утащить

[Switch74]

https://jsfiddle.net/chjgss2k/

[green-vik]

спасибо за советы, но оказалось все до банального просто, то есть вот как надо было

https://jsfiddle.net/45th4709/

[nightgremlin]

Чтобы не открывать новую ветку, да и по теме в принципе. Где ошибка: 

var div = document.createElement('div');
  div.className = "navigation";
  div.innerHTML = "Your panel navigation";
  
 
var screenWindows = screen.width;

    if (screenWindows >= 320 && screenWindows <= 480) {
       var f = document.body.getElementsByTagName('footer');
       f.appendChild(div);
    } else if (screenWindows >= 480) {
       var h = document.body.getElementsByTagName('header');
       h.appendChild(div);
    }

вот исходник: https://jsfiddle.net/5pwxwpsf/1/

[Switch74]

https://jsfiddle.net/5pwxwpsf/2/
Тут есть нюансы:
screen.width - размер экрана, а не окна браузера, скорее всего оно вам поможет если вы будете тестить на меньшем экране в реальности.
document.body.getElementsByTagName возвращает коллекцию элементов, а не сам элемент как это делает getElementById, т.к. с id подразумевается только 1 элемент, а элементов с одинаковым тегом может быть много

[nightgremlin]

6 часов назад, Switch74 сказал:

https://jsfiddle.net/5pwxwpsf/2/

+1, а я бьюсь. Мы же получаем коллекцию элементов (getElementsByTagName).  Кстати ваше решение из Flexbox тоже отличное!  

Edited September 22, 2017 by nightgremlin
Дополнение

[andrey7287]

Для подобных операций лучше подойдет matchMedia .  

[nightgremlin]

В 22.09.2017 в 16:36, Switch74 сказал:

Тут есть нюансы:
screen.width - размер экрана, а не окна браузера, скорее всего оно вам поможет если вы будете тестить на меньшем экране в реальности.
document.body.getElementsByTagName возвращает коллекцию элементов, а не сам элемент как это делает getElementById, т.к. с id подразумевается только 1 элемент, а элементов с одинаковым тегом может быть много

Это всё понятно, тут была важна задумка, что такое в принципе просто сделать на нативном  JS. Доработать и впустить в дело это уже дело житейское  

Edited September 27, 2017 by nightgremlin