Изменить содержимое div при смене размера экрана - JavaScript
 

Приветствую.
Пробую создать адаптивный сайт. Есть уже. Но вот хэдэр сайта у меня fixed и со смартфона смотрится ужасно.

Можете ли вы мне написать код, который будет удалять текст с div при разрешении (ширине) экрана в 720px и будет возвращать тот текст, если ширина экрана стала большей?

Пример того, что я сам искал и пробовал, но ничего не получилось.

<script type=text/javascript>
 
    $(window).resize(function() {
  if(document.documentElement.clientWidth < 721) {
   document.getElementByID("buy").innerHTML='<a href="#buy"> <div class="header_button_active"> <span class="segoe">о…Ќ</span> </div> </a>';
  }
});
 
</script>

<div id="buy"> <a href="#buy"> <div class="header_button_active"> <span class="segoe">о…Ќ</span> <span class="bold"> Купить </span> </div> </a> </div>

Нужно чтобы:
если ширина экрана меньше 721, то с div id="buy" удаляется весь текст и теги кроме:

<a href="#buy"> <div class="header_button_active"> <span class="segoe">о…Ќ</span> </div> </a>

То, что кроме - это нужно оставить.
если ширина экрана больше 721 то, div id="buy" должен быть с таким текстом и тегами:

<div id="buy"> <a href="#buy"> <div class="header_button_active"> <span class="segoe">о…Ќ</span> <span class="bold"> Купить </span> </div> </a> </div>

Помогите пожалуйста.

Я не силен в js, помогите кодом, если можно.

$(window).resize(function() {
	if (($(window).width() < 721 + 'px') {
		$( '#buy' ).html('<a href="#buy"> <div class="header_button_active"> <span class="segoe">о…Ќ</span> </div> </a>');
	else {
		$( '#buy' ).html('<a href="#buy"> <div class="header_button_active"> <span class="segoe">о…Ќ</span> <span class="bold"> Купить </span> </div> </a>');
	}
}

Предполагается, что <div id='buy'></div> уже присутствует в разметке.