如何使用css媒体查询将一个元素定位到另一个元素下

我被难住了。我正在创建一个基本网站。标题和选项卡并排放置。我想做的是，当屏幕变小或在平板电脑或iPhone上时，使用css媒体查询使标题位于选项卡上方。我使用了边距、填充、浮动、清除和其他css属性的组合，但它不能正常工作。我希望有人在这方面有坚实的经验，可以给我一个明确的答案。谢谢下面是控制标题的样式链接，如下所示

    <div>
        <div class="content">
            <div class="tabbedPanels"> <!--Added tabbedPanels to the entire site because each section is a panel-->
                <ul class="tabs" id="Menu"><!--Added class tabs and panel 1, 2, 3, 4-->
                    <li><a href="#panel1" class="normalMenu home">Home</a></li>
                    <li><a href="#panel2" class="normalMenu about">About</a></li>
                    <li><a href="#panel3" class="normalMenu work">Work</a></li>
                    <li><a href="#panel4" class="normalMenu contact">Contact Me</a></li>
                </ul>
                <div id="title">
                    <h1 id="first">Alex</h1>
                    <h1 id="last">Chaparro</h1>
                </div>
            </div>
        </div>
    </div>

---

但是，没有“确定的答案”，您应该清除浮动（float:none），更改元素的大小，基本上，在媒体查询中，您将重写大多数现有的css规则。。。检查一些教程…我确实看了很多教程，我还重写了负责这些元素的css元素，但无论我做什么，它们都会相互碰撞。我不知道你们为什么投票否决这个问题。我并没有投票否决（我并没有这样做，若我不喜欢这个问题，我就离开页面）。请提供您的CSS，也许它可以帮助…不知道为什么这被否决。。。对于问答网站来说，这是一个有效的问题。这就是这些网站的工作原理——有人提出问题，社区会提供帮助。向上投票。可能重复

  @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;
    }