title: Rearrange/Push or Pull Bootstrap tabs
body: <p>I've a strange situation wherein I've 2 Bootstrap tabs. Let's call them A &amp; B. 
  Case I: If tab A is marked as default tab then it should show like:</p>
  
  <p><strong>A</strong> | B </p>
  
  <p>with A also being the active tab at the same time!</p>
  
  <p>Case II: If tab B is marked as default tab then it should show like:</p>
  
  <p><strong>B</strong> | A</p>
  
  <p>with B also being the active tab at the same time!</p>
  
  <p>I've configured the application in such a way, that the user can select the default tab now &amp; it is shown as active. 
  But, how to show the default tab as the 1st one? Is there anything like push or pull we've in Bootstrap can be used here?</p>
  
  <p>Here's the bootstrap code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;title&gt;Bootstrap Case&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
            &lt;h2&gt;Dynamic Tabs&lt;/h2&gt;
            &lt;ul class="nav nav-tabs"&gt;
              &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#tabA"&gt;Tab A&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="tab" href="#tabB"&gt;Tab B&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;div class="tab-content"&gt;
              &lt;div id="tabA" class="tab-pane fade in active"&gt;
                &lt;h3&gt;Tab A&lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="tabB" class="tab-pane fade"&gt;
                &lt;h3&gt;Tab B&lt;/h3&gt;
                &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now, if tab B is marked as default, it will remove the class active from A and add it to B. Also, a   is created. This part is working fine.</p>
  
  <p>However, how do I ensure, when tab B is marked as default, it is also shown as the 1st tab?</p>