Html 如何将导航链接从页面顶部移动到底部

我基本上想保持导航的所有内容在HTML的顶部，但在我使用mobile first方法时，使用CSS将导航移到页面的底部，并希望在将导航调整为平板电脑或笔记本电脑时，导航显示在顶部。我尝试使用带底部标记的减号，但它需要花费很长时间才能到达底部，而且似乎不是最有效的方法。将上下文移到页面底部的唯一方法是将其放在HTML文件的底部，还是有一种完全不同的方法

这就是我目前的情况：

我想将带下划线的链接移到底部，我的代码：

#topnavigationmenu li{
显示：内联块；
列表样式类型：无；
字体大小：3rem；
填充：10px；
}

最简单的解决方案：您可以创建两个

实例，并使用媒体查询在手机和桌面上显示一个实例

可能更好的解决方案：您可以使用Flexbox（我猜甚至CSS网格）来更改顺序，因此假设在

主页

div中，您有两个部分，即

nav

和

div

，用于页面内容：

<nav id="topnavigationmenu">
    <ul>
        <li><a href="#"> example </a></li>
        <li><a href="#"> example </a></li>
        <li><a href="#"> example </a></li>
    </ul>
</nav>

<div class="page-content">
 <!-- Content here -->
</div>

您可以添加

display:flex

到

mainpage

，并使用媒体查询操作这些内容在移动设备与桌面/平板电脑上的显示顺序

我建议查看以下文章：

---

您的意思是要放在最下面还是在图像中的文本之后？很难理解你想要什么。你能详细说明你的问题吗？