Javascript-форум - Замена ссылок

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Замена ссылок (https://javascript.ru/forum/misc/55511-zamena-ssylok.html)

Замена ссылок

Добрый день.

Можно ли заменить ссылки дивами при смене расширения экрана?!

Пример: 1920px-1080px (Вызываем модальное окно).

<div class="menu-footer-2" id="modal-knopka-1">Контакты</div>

Делаем окно браузера меньше
Пример: 1024px-768px (Поскольку расширение окна маленько модальное окно не помещается в экран, заменяем <div> на ссылку <a> что бы открывалось не модальное окно а саму страницу).

<a href="/index/0-3" class="menu-footer-1">Контакты</a>

Знаю можно решить эту проблему стилями (на данный момент так и сделал)

но поисковикам дублирование текста в html не нравится а особенно гуглю, можно ли каким то чудесным способом реализовать такое?!

Как видит гугль html:

А может <div> вообще не нужен?

Может упростить немного задачу? Оставить только ссылки и поиграться со сменой классов в JS при изменении размера окна браузера?

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- code by newLifeJS -->
		<style type="text/css" media="screen">
			.red{ /* широкий вид */
				color: #e8fcff;
				font-size: 30px;
				display: inline-block;
				padding: 20px;
				margin-right: 100px;
				position: relative;
				width: 180px;
				background: linear-gradient( #5989d3 7.94%, #132b4f 108%); /* для картинки - url('image.jpg') */
				text-decoration: none;
				border-radius: 5px;
				box-shadow: 0px 1px 6px -1px #999;
			}
            .red:hover {
				background: linear-gradient(#4671b1 7.94%, #0b192f 91.72%);
			}
			.red:active{
				background: linear-gradient(#224984 7.94%, #0b192f 100%);
			}
			.blue{ /* узкий вид */
				color: blue;
				display: block;
				padding: 20px;
			}
			.div{
				border: 1px solid black;
				width: 100%;
				text-align: center;
			}
			.div1{
				border: 1px solid black;
				width: 100%;
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<a class="red" href="#">На главную</a>
			<a class="red" href="#">В контакте</a>
			<a class="red" href="#">Мы в Твитере</a>
		</div>
		<br>
		<span class="width"></span>
		<span class="height"></span>
		<script>		
			go();
			window.addEventListener('resize', go);
			function changeClass(a, b){ 
				var getEl = document.getElementsByClassName(a),
					i,
					j=getEl.length;
			  	for ( i = j - 1; i >= 0; i -= 1){
			  		var k = i;
			  		getEl[k].className = b;
			  	};
			}
			function go(){
			  document.querySelector('.width').innerText = document.documentElement.clientWidth; // info X
			  document.querySelector('.height').innerText = document.documentElement.clientHeight; // info Y
			
			  if (window.outerWidth < 984 /* && window.outerHeight < 520 */) { // срабатывает на ширину окна < 984px
				 changeClass('red', 'blue');
				 changeClass('div', 'div1');
			  } else {
			     changeClass('blue', 'red');
			     changeClass('div1', 'div');
			  }
			}
		</script>
	</body>
</html>

Slup,
не плохая идея буду экспериментировать, если что то получится выложу решение!