Как перемещать меню при низком разрешении экрана?

Здравствуйте! Стоит задача на имеющемся сайте, при разрешении экрана от 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">

но как сдвигать навигацию вниз?