Convert horizontal block to vertical in case scree

In the following code, I would like the horizontal three-column block to drop and stack on top of each other in case the size of the container becomes less than X pixels (for smaller or mobile devices). How and on which element of the table should I apply this property. Mind that the code is a content block so I'd rather not have CSS that applies to the entire email template or the email <body> unless this is the only way that solves this problem (something like using @media only screen and (max-width: 420px)).

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

    <!-- Title: BEGIN-->
    <tr>
        <td>
            <h2>Title</h2>
        </td>
    </tr>
    <!-- Title: END-->

    <tr>
        <td>
            <table cellpadding="20">
                <tr>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
    <tr>
        <td height="30">
        </td>
    </tr>
</table>

Do you want the layout to only be three across or three down? Or can each container wrap to the next line as the screen size decreases?

Your current code simply resizes the images, text, and containers when the screen is shrunk down. If you just want the containers to wrap as the screen shrinks, you can accomplish this by using <div> tags and float:left; and max-width CSS.

The main issue you're having is that each container is a completely separate table, each of which is in a completely separate table cell inside another table.

Take a look at this (run the code snippet and use the Full Page link to test it out):

.container {
    background-color: #ffffff;
    max-width: 300px;
    float: left;
    margin: 10px;
    padding: 20px;
}

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

  <!-- Title: BEGIN-->
  <tr>
    <td>
      <h2>Title</h2>
    </td>
  </tr>
  <!-- Title: END-->

  <tr>
    <td>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
    </td>
  </tr>
  <tr>
    <td height="30">
    </td>
  </tr>
</table>

If this isn't what you're looking for, please let me know.

Also, just an fyi, there are several areas of your code that you should rethink. Specifically, any time you're specifying a size, you should be putting the unit with it. i.e. width="1024"....1024 what? If it's pixels, use 1024px. And to take that point a little further, in the <img> elements you already have CSS that says width: 100%;. So, also having width="1024" is redundant and confusing.