jquery - Resorting the active bootstrap tab when stacked -

for new bootstrap website i'm working on, sorting active tab when nav-tab stacks, selected tab connected tab-pane. while works, feels hack me. there better way accomplish preserves original tab order?

html markup:

<div id="tab-bundle" class="container-fluid">     @html.hiddenfor(model => model.selectedbundle)     <ul class="nav nav-tabs" id="coveragetabs">          <li><a href="#minimum">@languagedb.me.minimum</a></li>          <li><a href="#better">@languagedb.me.better</a></li>          <li><a href="#best">@languagedb.me.best</a></li>          <li><a href="#custom">@languagedb.me.custom</a></li>     </ul>      <div class="tab-content">          <div class="tab-pane active bg-info" id="ajaxpanel">             @html.partial("selectedbundle", model)          </div>     </div> </div> 

javascript:

$(document).ready(function () {      var updatecoverage = function (e) {         e.preventdefault();         var $tab = $(this);         $('#selectedbundle').val($(this).attr("href").substr(1));         $('#coveragetabs a').css({ backgroundcolor: "", color: "" });          // ajax omitted brevity         $tab.tab('show').css('background-color', $('#ajaxpanel').css('background-color')).css('color', $('#ajaxpanel').css('color'));          if ( $('#coveragetabs').width() < 768 ) {           $tab.closest('li').appendto('#coveragetabs');         }     };      $('a[href=#' + $('#selectedbundle').val() + ']').tab('show').css('background-color', $('#ajaxpanel').css('background-color')).css('color', $('#ajaxpanel').css('color')); ;      $('#coveragetabs a').click(updatecoverage);  }); 

screenshot (notice minimum tab has moved end):

this reminds bit of recent question answered:

unordered list - list item position

the idea minimal javascript—say, adding , removal of 'active' class—we can still achieve you're trying do:

your css contain this:

ul {   display: flex; }  li[class=active] {   order: 4; /* whatever last <li> slot */   background: green } 

then, when javascript assigns active class, <li class="active"> should magically reorder end of list , connected tab pane.