Здравствуйте! Стоит задача на имеющемся сайте, при разрешении экрана от 480px и ниже, перемещать навигацию вниз страницы. Меню располагаются слева и справа. По середине контент. Вот пример:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div>Навигация</div>
<div>
<ul>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
</td>
<td valign="top">
<h1>Заголовок</h1>
Текст на странице
</td>
<td valign="top">
<div>Навигация</div>
<div>
<ul>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
</td>
</tr>
</table>
В CSS прописываю
@media screen and (max-width: 480px)
а в шаблоне
<meta name="viewport" content="width=device-width, initial-scale=1.0">
но как сдвигать навигацию вниз?