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

Question

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

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