title: Need help moving HTML+CSS Tabs below the respective content pane
body: <p>I use radiobuttons to create a simple tab-bar for a webpage, using only HTML and CSS.</p>
  
  <p>This is the current code: <a href="http://jsfiddle.net/nypd81x9/1/" rel="nofollow">http://jsfiddle.net/nypd81x9/1/</a></p>
  
  <pre><code>&lt;ul class="tabs"&gt;
  &lt;li&gt;
      &lt;input type="radio" name="tabs" id="tab1" checked /&gt;
      &lt;label for="tab1"&gt;Description&lt;/label&gt;
      &lt;div id="tab-content1" class="tab-content"&gt;
        &lt;p&gt;content 1&lt;/p&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
   &lt;li&gt;
      &lt;input type="radio" name="tabs" id="tab2" /&gt;
      &lt;label for="tab2"&gt;Specification&lt;/label&gt;
      &lt;div id="tab-content2" class="tab-content"&gt;
        &lt;p&gt;content 2&lt;/p&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>How do I move the tabs <em>below</em> the content, like this: <a href="http://i.imgur.com/FzVB9TD.png" rel="nofollow">http://i.imgur.com/FzVB9TD.png</a></p>
  
  <p>Thank you in forward</p>