title: How do I position one element under another element using css media queries
body: <p>I'm stumped. I am creating a basic site. The header has a title and tabs placed side by side. What I would like to do is use css media queries to have the title be above the tabs when the screen gets smaller or on a tablet or iPhone. I used a combination of margins, paddings, float, clear and other css properties but it's not working properly. I was hoping someone out there has solid experience with this and can give me a definitive answer. Thanks. here is a link to <a href="http://www.alexechaparro.com" rel="nofollow">my website</a> The styles controlling the titles are as follows.</p>
  
  <pre><code>    &lt;div&gt;
          &lt;div class="content"&gt;
              &lt;div class="tabbedPanels"&gt; &lt;!--Added tabbedPanels to the entire site because each section is a panel--&gt;
                  &lt;ul class="tabs" id="Menu"&gt;&lt;!--Added class tabs and panel 1, 2, 3, 4--&gt;
                      &lt;li&gt;&lt;a href="#panel1" class="normalMenu home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel2" class="normalMenu about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel3" class="normalMenu work"&gt;Work&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#panel4" class="normalMenu contact"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id="title"&gt;
                      &lt;h1 id="first"&gt;Alex&lt;/h1&gt;
                      &lt;h1 id="last"&gt;Chaparro&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Below is the css  </p>
  
  <pre><code>  @media screen and (max-width: 1024px) {    /*and (orientation:portrait) and (max-device-width: 1024px) { /*Added for tab*/
      header{
          height: 150px;
          clear: both
          padding-bottom: 30px;
      }
      .title {
          clear: both;
      }
  </code></pre>