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

Question

[SplashWeb]

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

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

Answer 1

[Ankhena]

table? 2016? класс!

Если оставить этот табличный раритет, то в media для мелких верхнее меню скрывать display:none, нижнее показывать. Для больших - соответственно наоборот.

Ну а по-хорошему, переверстать нормально.

Comments

[SplashWeb]

Тогда мы дублируем ссылки, что не есть хорошо.

[Ankhena]

SplashWeb: ну тут придется выбирать либо таблицы, либо дубли :)

Да и ничего не мешает сложить их в noindex

[Ankhena]

SplashWeb: может быть, можно поразвлекаться с thead и tfoot, меняя один на другой через JS. Но, по-моему, это жестоко.

[SplashWeb]

Ankhena W: если переделывать верстку исключительно в div, данный вопрос решается?

[Ankhena]

SplashWeb: html5book.ru/css3-flexbox/#order

[SplashWeb]

Ankhena W: Спасибо!