When working with Bootstrap 4, I am aware that the .col-xs classes have been removed. Instead of using .col, I have tested it on Bootstrap 3.5 which is currently being utilized.
<div class="col-xs-4">
Table content for left side here
</div>
<div class="col-xs-8">
Table content for right side here
</div>
It worked perfectly as shown here.
However, there are some differences in how it behaves on Bootstrap 4 Alpha:
<div class="col-2">
<h2 class="sub-header">Test Area</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
You can view the results here.
Even though I want the tables to be displayed side by side, they appear differently. Am I overlooking something?