Отображение таблеток Nav в виде сетки

Question

Я использую технику «Вертикальные навигационные таблетки в ряд», чтобы отображать навигационные таблетки подряд, когда страница просматривается в умеренно широкой области просмотра.Эти навигационные таблетки складываются по одной таблетке в ряду при просмотре на меньшем экране.Это все работает, как и ожидалось.

<div class="container">
  <div class="row mb20 mt20">
            <div class="col-md-3">
                <ul id="myTab" class="nav nav-pills nav-justified">
                    <li class="lead"><a id="tab1" href="#one" data-toggle="tab"><br>Lengthyword 1<br>&nbsp;<br></a></li>
                    <li class="lead"><a id="tab2" href="#two" data-toggle="tab"><br>Lengthyword 2<br>&nbsp;<br></a></li>
                    <li class="lead"><a id="tab3" href="#three" data-toggle="tab"><br>Lengthyword 3</a><br>&nbsp;<br></li>
                    <li class="lead"><a id="tab4" href="#four" data-toggle="tab"><br>Lengthyword 4</a><br>&nbsp;<br></li>
                    <li class="lead"><a id="tab5" href="#five" data-toggle="tab"><br>Lengthyword over various lines</a><br>&nbsp;<br></li>
                    <li class="lead"><a id="tab6" href="#six" data-toggle="tab"><br>Lengthyword 6</a><br>&nbsp;<br></li>
                </ul>
            </div>
   </div>
</div>

Я хотел бы сделать две таблетки на ряд, а не только обычную.Что было бы самым элегантным способом сделать это?

Я создал ручку на https://codepen.io/mpoo/pen/MPqdyJ