Может упростить немного задачу? Оставить только ссылки и поиграться со сменой классов в 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>