The table is not transferred on mobile devices. How to do?

Question

HTML

Good afternoon! The site has a table, and if you access the site from your phone, the second button is not transferred, but cut off. How can I move table columns under each other?
I tried to do it through bootstrap, but somehow the result did not change,
thanks in advance!

<table>
    <tr>
<div class="calc-for-content-pages" style="text-align: center;">
            <div class="buttonblock">
                <td><a href="#zayavka" class="button sliding" data-link="price-list"><b>ОСТАВИТЬ ЗАЯВКУ</b></a></td>
                    <td style="vertical-align: middle;"><span>
                         или
                    </span></td>
                <td><a href="javascript:void(0)" class="button callback"><b>ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ</b></a></td>
            </div>
    </tr>        
</div>
</table>

Answer 1

Set the cells

td {
 display: block;
 width: 100%;
}

Answer 2

In my opinion, there is no need for a table. Use flex, flex-wrap: wrap and flex-basis with the desired width after which the wrap should occur