mobile-web-table-layout–Making an old table layout reponsive

Background

Given the following old table-based layout. Please use CSS to make the layout responsive to small screen.

You may add classes to HTML if needed.

Requirement

You can get started with the following codepen:

https://codepen.io/makzan/pen/qvgWPv

or the following HTML:

<table class='container' width=1000>
  <tr>
    <td colspan=999>
      <h1>Demo on making an old table layout reponsive</h1>
    </td>
  </tr>
  <tr>
  </tr>
  <tr class='row'>
    <td class=menu width=100 valign=top>
      <table width=100>
        <tr><td><a href="#">Link 1</a></td></tr>
        <tr><td><a href="#">Link 2</a></td></tr>
        <tr><td><a href="#">Link 3</a></td></tr>
        <tr><td><a href="#">Link 4</a></td></tr>
        <tr><td><a href="#">Link 5</a></td></tr>
        <tr><td><a href="#">Link 6</a></td></tr>
        <tr><td><a href="#">Link 7</a></td></tr>
      </table>
    </td>
    <td class='main'>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here.</p>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. main content goes here. main content goes here.</p>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. </p>
      <p>MAIN HERE main content goes here.  main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here. main content goes here.</p>
    </td>
    <td class='sidebar' width=200 valign=top>
      <table width=100%>
        <tr>
          <td>
            <img src="http://placehold.it/500/500?text=Ads" alt="Ads placeholder" width=200>
          </td>
        </tr>
        <tr>
          <td>
            Side bar content
          </td>          
        </tr>
        <tr>
          <td>
            Side bar content
          </td>          
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan=9999>
      <table>
        <tr class='row'>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
          <td width=250>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
            <p>FOOTER HERE</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr><td colspan=999>Copyright goes here</td></tr>
</table>