I'm struggling to make my code responsive for different screen sizes. The default Bootstrap classes are not working properly and I need help fixing that. Instead of using divs, I have to work with tables. Can someone assist me in making my code responsive?
<div class="row text-center">
<table class="responsive table">
<tr class="container">
<!-- child table 1 starts -->
<td class="row responsive table">
<table class="col-xs-12 col-sm-6">
<tbody class="logo-box">
<tr class="table winning-nbr-box winning-nbr">
<td class="winning-logo text-center">
<a href="https://www.lotterycorner.com/oh/pick-3-midday">
<img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick3.png" alt="Ohio Pick 3 Midday Winning numbers" style="margin-top:40px;">
</a>
<p class="winning-inner">
...
</p>
</td>
</tr>
</tbody>
</table>
</td>
<!-- child table 1 ends -->
<!-- child table 2 starts -->
<td class="row responsive table">
...
</td>
<!-- child table 2 ends -->
<!-- child table 3 starts -->
<td class="row responsive table">
...
</td>
<!--child table3 ends-->
</tr>
</table>
</div>