Acorn Nav Reverse Stack Vertical Mobile

acorn-nav-reverse-stack-vertical-mobile.html

<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td style="padding: 0 24px;">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col pb-sm-16" width="122" style="padding: 0 8px;">
            <img src="http://placehold.it/160x160?text=LOGO" class="align-sm-center" alt="Logo" width="80" style="border-radius: 50%; max-width: 80px; width: 100%;">
          </td>
          <td class="col" width="398" style="padding: 0 8px; vertical-align: middle;">
            <table align="right" class="nav nav-sm-vertical align-sm-center text-sm-center full-width-sm" cellpadding="0" cellspacing="0" role="presentation">
              <tr class="full-width-sm">
                <td class="nav-item stack-sm-last" style="padding-right: 24px;">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">News</a>
                </td>
                <td class="nav-item stack-sm-last" style="padding-right: 24px;">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">Services</a>
                </td>
                <td class="nav-item stack-sm-first" style="padding-right: 24px;">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">Work</a>
                </td>
                <td class="nav-item stack-sm-top">
                  <a href="http://example.com" style="color: #999999; text-decoration: none;">Store</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>