Bootstrap table stack on mobile

Hello,

i have a simple bootstrap table without a table header.

How can i change the code so that i don't have to scroll horizontally with small screens, but the table is stacked?

This is my actual code:

<table class="mt-5 table table-striped table-hover align-middle" style="width: auto">
        <tbody>
            <tr>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A1</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A2</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A3</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A4</td>
            </tr>
            <tr>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B1</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B2</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B3</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B4</td>
            </tr>
            <tr>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C1</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C2</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C3</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C4</td>
            </tr>
        </tbody>
    </table>

Thank you! :-)

Best Regards

Tom