[serhio11]

Здравствуйте!
Имеется два меню на странице:

<div class="header">
	<ul class="menu">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</div>

<div class="sidebar">
	<ul class="menu">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</div>

Необходимо, если разрешение экрана меньше 768px, то пункты меню в блоке с классом sidebar переносились в меню в блоке с классом header. Причем, если страница открывается на планшете с вертикальной ориентацией экрана, а затем повернули планшет горизонтально и разрешение экрана стало больше 768px, то пункты меню должны вернуться на место.

Вот как это можно сделать?

В этой ветке:
https://javascript.ru/forum/misc/441...gojj-blok.html
есть пример по перемещению содержимого блока. Переделал его под себя, получилось так:

if (screen.width <= 768) {
	var one = document.querySelector('.sidebar ul.menu'),
    two = document.querySelector('.header ul.menu');
	
	while (one.lastChild) {
		two.insertBefore(one.lastChild, two.firstChild);
	}	
}

onresize = function(){
	if (screen.width <= 768) {
		var one = document.querySelector('.sidebar ul.menu'),
		two = document.querySelector('.header ul.menu');
		
		while (one.lastChild) {
			two.insertBefore(one.lastChild, two.firstChild);
		}	
	} 
	else {
		// Вот тут надо как-то вернуть всё обратно!
	}
}

Или может быть вообще как-то по другому нужно делать?
Новичок в JS, опыта нет - сам не соображу))