I am in the process of developing a calculator and have chosen to use Bootstrap4 tables for the button alignment. However, I am facing an issue where the table is being rendered in the reverse order of the code that I have written. The columns within the table are appearing reversed.
<table class="table text-center table-sm table-borderless mt-2">
<tbody>
<tr>
<td colspan="2">
<div class="btn-group btn-group-justified" role="group">
<button type="button" class="btn btn-grey btn-left">Rad</button>
<button type="button" class="btn btn-grey">Deg</button>
</div>
</td>
<td><button class="btn btn-grey btn-block ripple border">x!</button></td>
<td><button class="btn btn-grey btn-block ripple border">(</button></td>
<td><button class="btn btn-grey btn-block ripple border">)</button></td>
<td><button class="btn btn-grey btn-block ripple border">%</button></td>
<td><button class="btn btn-grey btn-block ripple border">AC</button></td>
</tr>
<tr>
<td><button class="btn btn-grey btn-block ripple border">inv</button></td>
<td><button class="btn btn-grey btn-block ripple border">sin</button></td>
<td><button class="btn btn-grey btn-block ripple border">ln</button></td>
<td><button class="btn btn-light btn-block ripple border">7</button></td>
<td><button class="btn btn-light btn-block ripple border">8</button></td>
<td><button class="btn btn-light btn-block ripple border">9</button></td>
<td><button class="btn btn-grey btn-block ripple border">÷</button></td>
</tr>
<tr>
<td><button class="btn btn-grey btn-block ripple border">π</button></td>
<td><button class="btn btn-grey btn-block ripple border">cos</button></td>
<td><button class="btn btn-grey btn-block ripple border">log</button></td>
<td><button class="btn btn-light btn-block ripple border">4</button></td>
<td><button class="btn btn-light btn-block ripple border">5</button></td>
<td><button class="btn btn-light btn-block ripple border">6</button></td>
<td><button class="btn btn-grey btn-block ripple border">x</button></td>
</tr>
<tr>
<td><button class="btn btn-grey btn-block ripple border">Ɛ</button></td>
<td><button class="btn btn-grey btn-block ripple border">tan</button></td>
<td><button class="btn btn-grey btn-block ripple border">√</button></td>
<td><button class="btn btn-light btn-block ripple border">1</button></td>
<td><button class="btn btn-light btn-block ripple border">2</button></td>
<td><button class="btn btn-light btn-block ripple border">3</button></td>
<td><button class="btn btn-grey btn-block ripple border">−</button></td>
</tr>
<tr>
<td><button class="btn btn-grey btn-block ripple border">Ans</button></td>
<td><button class="btn btn-grey btn-block ripple border">EXP</button></td>
<td><button class="btn btn-grey btn-block ripple border">X<sup>y</sup></button></td>
<td><button class="btn btn-light btn-block ripple border">0</button></td>
<td><button class="btn btn-light btn-block ripple border">.</button></td>
<td><button class="btn btn-primary btn-block ripple border"><b>=</b></button></td>
<td><button class="btn btn-grey btn-block ripple border">+</button></td>
</tr>
</tbody>
</table>