根据屏幕大小更改 HTML 内容顺序 [重复]答案

【问题标题】：Changing HTML content order depending on screen size [duplicate]根据屏幕大小更改 HTML 内容顺序 [重复]
【发布时间】：2016-12-09 00:52:56
【问题描述】：

我想知道是否有办法根据屏幕大小更改 HTML 内容的顺序。

这是主要的网站标题，它会在每个媒体查询中正确显示。

<h1>title</h1>
<nav>inline list items</nav>
<h2>subtitle</h2>

基本上是这样的：

H1 文本
H2 TEXT-----------------列表项

（或查看http://www.jeroenduijker.nl/test/ 并调整屏幕大小）

媒体查询一进入（@media only screen and (max-width: 480px) {}），h2 被压扁，我更愿意将导航栏放在 h1 上方。

有没有一种简单的方法可以让 html 运行：

------列出项目
H1 文本
H2文本

希望我已经解释得很好，我希望你能帮助我，我将不胜感激！

【问题讨论】：

标签： html css

【解决方案1】：

您可以编写两个导航栏，一个隐藏另一个可见，然后根据媒体查询进行切换。

HTML：

<nav class="show-mobile">
      ...
</nav>

<h1>title</h1>
<nav class="hide-mobile">
      ...
</nav>
<h2>subtitle</h2>

CSS：

@media only screen and (max-device-width: 480px) {
      .show-mobile {
        display: block;
      }
      .hide-mobile {
        display: none;
      }
    }

 @media only screen and (min-device-width: 481px) {
      .show-mobile {
        display: none;
      }
      .hide-mobile {
        display: block;
      }
    }

或者两个 H1 元素，一个在导航之前，一个在之后，让它们根据媒体查询切换可见性。

<h1 class="hide-mobile"></h1>
<nav>
  ...
  ...
</nav>
<h1 class="show-mobile">Title</h1>
<h2>subtitle</h2>

或者您可以在移动媒体查询处于活动状态时告诉导航在顶部进行绝对定位。

@media only screen and (max-device-width: 480px) {
  nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px
  }
}

【讨论】：

我已经尝试了所有三个选项，但是隐藏元素并没有“删除”它，所以它保留在那里，不幸的是仍然将 h2 挤压到一边:( 编辑；第三个选项可能工作，但我将不得不编辑一些位置，因为它不再与其他东西保持一致
我使用了 absolute 选项，因为它可以移动元素，并且正确定位它，并为媒体查询更改了一些其他 css，谢谢！
@Jeroen 该类不会仅靠它自己工作，您实际上还需要在 CSS 中创建该类。请参阅我的编辑。您可能还想花一些时间阅读一些 CSS 媒体查询基础知识。