Question

我的页面中有这样的内容：

<header>
    <nav>
        a menu...
    </nav>
</header>
<section>
    some block...
</section>
<section>
    <article>
        article content...
    </article>
    rest of the page...
</section>

它是一个标准的网页布局结构：顶部的菜单，然后是主要主题（第一个<section>）的部分，然后是页面的其余部分（第二个<section>）。在桌面视图上可以。

问题：可以用移动设备上的第一个部分块替换CSS 导航块，以便主要主题位于主要顶层菜单之上？

Answer 1

Ypu可以使用（i）CSS媒体查询（ii）CSS flexbox（iii）order属性来交换元素的顺序而不改变HTML：

＆＃13;

/*
 * change order of header and sections on smaller screens using CSS flex
 * use the stack snippet Full page button to view the "desktop" version
 */
@media only screen and (max-width: 700px) {
  #wrapper {
    display: flex;
    flex-direction: column;
  }
  section:nth-of-type(1) {
    order: 1;
  }
  header {
    order: 2;
  }
  section:nth-of-type(2) {
    order: 3;
  }
}

＆＃13;

<div id="wrapper">
  <header>
    <nav>Navbar</nav>
  </header>
  <section>Section 1</section>
  <section>Section 2</section>
</div>

＆＃13;

Answer 2

您可以使用@media隐藏nav。请尝试放大此fiddle

＆＃13;

@media screen and (max-width: 600px) {
    nav {
        display:none;
    }
}

＆＃13;

<header>
    <nav>a menu...</nav>
</header>
<section>some block...</section>
<section>
    <article>article content...</article>rest of the page...</section>

＆＃13;

在较小的屏幕上交换<nav>和<section>的位置</section> </nav>

2 个答案: