Can someone help me figure out how to make this table responsive using Twitter Bootstrap 4? Here's the JS Fiddle Link for reference.
<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>Seeking a solution to create a responsive version of this table where plan 2 appears below plan 1 in the responsive view. For current CSS, visit the JS Fiddle Link.