How to get p tags to go from a stacked position to left to right in a responsive email

Question

I've been creating a responsive email and I've been having some issues with the Desktop/Mobile changes. I want the Desktop version to look something like this:

Order Summary                Shipping Address
12345                         111 Broadway st

And the Mobile to look like this:

Order Summary     12345
Shipping Address   111 Broadway Street

I've tried a few ways already and while it works in the html inspection on my local server, it doesn't work when I send the test email to a client server.

The snippet of code shows the base email template of one of the div sections there, any insight would be much appreciated

     @media screen and (max-width: 400px) {

      .two-column {
        max-width: 50%!important;
        width: 50% !important;
        background-color: #730E15!important;
      }

    }

<td class="two-column" style="padding: 5px 0 10px 0;text-align: center;font-size: 0;">
    <div class="section" style="width: 50%;max-width: 300px;display: inline-block;vertical-align: top;">
            <table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #727f80;">
              <tr>
                <td class="inner-td" style="padding: 10px;">
                  <table class="content" style="border-spacing: 0;font-family: sans-serif;color: #727f80;width: 50%;padding-top: 20px;font-size: 16px;line-height: 20px;text-align: justify;">
                    <tr>
                      <td style="padding: 0;">
                        <p>Order Number</p>
                        <p> 12345 </p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div> <!--- End First Column of Two Columns -->

Answer 1

Expanding on my comment:

You can have both horizontal vertical headers in your HTML, and then show the right header based on screen size.

You can use CSS Media Queries to show the desired header based on screen width.

As an alternative, if you use <div>s instead of <table>s, you can use media queries to have the "columns" float horizontally on desktop but stack vertically on mobile.