title: Bootstrap responsive layout in mobile convert to tabs
body: <p>So as the title suggests, I am currently using Bootstrap.  I am working on a responsive layout that in desktop size, is just a normal columned floated layout.  Then in mobile device or tablet size, it adds bootstrap tabs.  I am not sure quite how to solve this as the bootstrap 3 col-xs floats don't seem to be playing nice with the tabs plugin.  I have made a diagram to help explain.</p>
  
  <p><img src="https://i.imgur.com/NL8x0An.jpg" alt="Layout Diagram"></p>
  
  <p>Fiddle I've been working with <a href="http://jsfiddle.net/wNZc6/" rel="noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;   
  &lt;div class="content"&gt;
      &lt;ul class="nav nav-tabs visible-phone"&gt;
          &lt;li class="active"&gt;&lt;a href="#t1" data-toggle="tab"&gt;T1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#t2" data-toggle="tab"&gt;T2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#t3" data-toggle="tab"&gt;T3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="row tab-content"&gt;
          &lt;div class="col-sm-4 tab-pane active" id="enter"&gt;
              &lt;div class="inner-right-border"&gt;
                  &lt;h2&gt;T1 CONTENT&lt;/h2&gt;
                  &lt;hr /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-8"&gt;
              &lt;div class="tab-pane" id="t2"&gt;
                  &lt;h2&gt;T2 CONTENT&lt;/h2&gt;&lt;hr /&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane" id="t3"&gt;
                  &lt;h2&gt;T3 CONTENT&lt;/h2&gt;&lt;hr /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;                
  </code></pre>
  
  <p>
  </p>
  
  <p>Thanks in advance for any help!</p>