根据屏幕大小更改HTML内容顺序

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

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

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

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

标题
内联列表项
字幕

基本上是这样的：

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

（或签出并调整屏幕大小）

一旦媒体查询进入（@media only屏幕和（最大宽度：480px）{}） ，h2被压扁，我更喜欢把导航条放在h1上面

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

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

---

希望我解释得足够好，希望你能帮我，我会很感激的

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

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

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

HTML:

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

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

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

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

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

---

我已经尝试了所有三个选项，但是隐藏元素并不会“移除”它，所以它会停留在那里，并且仍然会将h2挤压到一边，很不幸：（编辑；第三个选项可能会起作用，但我必须编辑一点位置，因为它不再与其他内容保持内联。我使用了绝对选项，因为它移动元素，并正确地定位了元素，并且为媒体查询更改了一些其他css，谢谢！@Jeroen该类不会只处理它自己的你“我实际上也需要在CSS中创建类。请参阅我的编辑。您可能还需要花一些时间阅读一些CSS媒体查询基础知识。”。