Html 带有页眉部分主标记和页脚标记的页面布局

我有4块页眉，部分，主要，页脚

我在标题中添加了一个水平菜单，并将其设置在带有滑块的部分菜单上方。但问题是，当页面宽度小于1136像素时，我想将菜单设置为垂直，菜单覆盖了部分中的滑块，我不希望这样。我想要的是部分下面的菜单，这样用户可以看到菜单和滑块。 我把我的网站网址理解得很好

/*标题标签*/
.cd头{
位置：绝对位置；
z指数：5；
排名：0；
左：0；
宽度：100%；
高度：50px；
背景色：rgba（0,1,1,0.4）；
}
/*区段标签*/
.cd英雄{
位置：相对位置；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
/*主标签*/
.cd主要内容{
宽度：90%；
最大宽度：768px；
保证金：0自动；
填充：2em 0；
}

只需使用display:none即可加快速度

在滑动条所在的区域下方添加另一个菜单，仅当滑动条达到宽度

1136px

时才显示

另一种方法是使用flex

使用flex，您可以设置项目的顺序；这里有一本旅游指南。也可供参考

使用flex的示例：

<header>
    <div class="wrapper">
        <nav>...links...</nav>
        <div class="slider"></div>
    </div>
</header>
<section></section>

/** CSS **/
header .wrapper {
    display:flex;
    flex-direction:column;
}

@media only screen and (max-width:1136px){
    nav {
        order:2;
    }
    .slider {
        order:1;
    }
}

…链接。。。
/**CSS**/
标题.包装{
显示器：flex；
弯曲方向：立柱；
}
@仅介质屏幕和（最大宽度：1136px）{
导航{
顺序：2；
}
.滑块{
顺序：1；
}
}

请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。创建一个并将其放在问题本身中。您所做的只是在浏览器中最小化一点，并告诉我为什么我的滑块位于菜单后面。我认为答案很简单，我很困惑地找到了它。因此，如果你能找到问题，请回答我，而不是像这样评论我。非常感谢。请参考我之前的评论。