var third = document.createElement('div'); // создание нового элемента
third.className = "third"; // присвоение ему класса
third.innerHTML = "<span>third</span>"; // наполнение его потомками
window.onresize = function() { // отслеживание изменения размеров окна
if (!(document.querySelector('.third')) && window.innerWidth < 500) {
// проверка на существование блока и на размер окна меньше 500 пикселей
document.getElementById('main').appendChild(third); // добавление чайлда
} else if (window.innerWidth > 500) {
// альтернативная провека на размер окна больше 500 пикселей
document.getElementById('main').removeChild(third); // удаление чайлда
}
}
.first {background: red;}
.second {background: green;}
.third {background: blue;}
#main {color: white; font-size: 24px;}
<div id="main">
<div class="first"><span>first</span></div>
<div class="second"><span>second</span></div>
</div>