Bootstrap: Firefox does not properly place tables above 767px width - css

Question

I've created a simple web site with a Bootstrap navbar with tabs. Each tab shows a table. (See here.)
This works fine in Chrome 45 and IE 11 on Windows 8.1.
In Firefox however the tables are placed right to the navbar if the window width is greater than 767px.
<div id="content">
<ul class="nav nav-pills nav-tabs nav-justified navbar-header">
<li class="active"> Tab 1
</li>
<li> Tab 2
</li>
</ul>
<div>
<h1>test</h1>
<table class="table table-bordered table-striped table-responsive" id="azubiTable">
<thead>
<tr id="head">
<th>1st col</th>
<th>2nd col</th>
<th>3rd col</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>

Answer 1

My best interpretation is that this is a float clearing issue not working correctly in FF.
If you add clear:both to the div that holds the table it works in FF.

Answer 2

Put nav and table inside col-*-12 like this
<div id="content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<nav>
<ul class="nav nav-pills nav-tabs nav-justified navbar-header">
<li class="active"> Tab 1
</li>
<li> Tab 2
</li>
</ul>
</nav>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<table class="table table-bordered table-striped table-responsive" id="azubiTable">
<thead>
<tr id="head">
<th>1st col</th>
<th>2nd col</th>
<th>3rd col</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Fiddle