Добрый день всем!

Хочется сделать так, чтобы на устройствах с экраном меньше 640 пикселей посетителям показывался другой графический файл логотипа и другой текст верхнего меню. Но почему-то получатся так, что логотип меняется как и ожидалось, а вот ссылки меню проваливаются куда-то вниз страницы. Инспектор кода Ф12 не дает ответа о причинах. Код такой:

#top_menu_wide, top_menu_narrow{width: 100%; position: relative; display:none;}

#top_menu_1, #top_menu_2 {position: absolute; bottom:5%; text-align: center; left:0; right:0; display:none;}
#top_menu_1 a, #top_menu_2 a{text-decoration:none;color: #00F;}

@media screen and (min-width:640px){
#top_menu_wide {display:block;}
#top_menu_narrow {display: none;}
#top_menu_1 {display:block;font-size:16px; font-weight: bold;} <!-- 640 и больше -->
}


@media screen and (min-width:535px) and (max-width:640px){
#top_menu_wide {display:none;}
#top_menu_narrow {display:block ;}
#top_menu_2 {display:block;font-size:14px; font-weight: normal;} <!-- 535-640 -->
}


<div id="top_menu_wide">
<a href="/"><img src="/my-design/logo-3.jpg" style=" width:100%; height:auto;"></a>

<div id="top_menu_1">
<a href="/s1.html">Миссия</a>
<a href="/s2.html">Как вступить</a>
<a href="/s2.html">Члены клуба</a>
<a href="/s2.html">Сообщество</a>
</div>

</div> <!-- top_menu_wide -->


<div id="top_menu_narrow">
<a href="/"><img src="/my-design/logo-4.jpg" style=" width:100%; height:auto;"></a>

<div id="top_menu_2">
<a href="/s1.html">Миссия</a>
<a href="/s2.html">Как вступить</a>
<a href="/s2.html">Сообщество</a>
</div>

</div> <!-- top_menu_narrow -->

Улетает вниз весь <div id="top_menu_2">.

Можете подсказать, в чем здесь ошибка?