How to move menu on low screen resolution?

Question

Screen resolution

Hello! The task is on the existing site, with a screen resolution of 480px and below, to move the navigation down the page. Menus are located on the left and right. Content in the middle. Here is an example:

<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>

In CSS I prescribe and in the template@media screen and (max-width: 480px)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

but how to move the navigation down?

Answer 1

table? 2016? Class!
If you leave this tabular rarity, then in the media for small top menus hide display: none, show the bottom one. For large ones, the opposite is true.
Well, in an amicable way, it is normal to turn over.