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

Question

我难住了。我正在创建一个基本站点。标题有一个标题和并排放置的选项卡。我想做的是当屏幕变小或在平板电脑或 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>

下面是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;
    }