Responsive table in bootstrap - html

Question

My question is quite simple, how do I make this table responsive using twitter bootstrap 4? Below is a JS Fiddle Link.
<div class="some-table-section">
<div class="container">
<table class="table some-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Plan 1</th>
<th scope="col">Plan 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Option 1</th>
<td>$1</td>
<td>$2</td>
</tr>
<tr>
<th scope="row">Option 2</th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Option 3</th>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row"></th>
<td><a href="#" class="btn btn-primary">Select this plan</td>
<td><a href="#" class="btn btn-primary">Select this plan</td>
</tr>
</tbody>
</table>
</div>
</div>
What I would like to have is a responsive version of this table such that plan 2 is below plan 1 in the responsive version. PS. You can find the current CSS in the JS Fiddle Link.

Answer 1

You should check Bootstrap Docs: https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables
Simply wrap your table with .table-responsive
Basic example:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You can have breakpoint specific responsive table using class table-responsive{-sm|-md|-lg|-xl}