Html 当站点的移动版本启动时，将菜单项移到底部

我有一份菜单，我在下面展示了

<nav>
    <div>
        <a href="/1">1</a>
        <a href="/2">2</a>
        <a href="/3">3</a>
    </div>
    <div>
        <a href="/4">4</a>
        <a href="/5">5</a>
    </div>
</nav>

我的菜单在浏览器中的显示方式

当用户通过手机访问站点时，我想将第3项放在页面底部，如下所示

解决这个问题最简单的方法是创建一个新元素，在菜单中隐藏元素编号3，当用户从手机进入站点时，在页面底部显示一个新元素

---

我想使用一个元素，如何在每页使用一个元素。如何做到这一点？

这里有一个基本的例子，说明你在寻找什么

nav{
弹性：1；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
用户选择：无；
}
a{
对齐项目：居中；
利润率：0.10px；
字号：600；
字体大小：rem（16）；
文本转换：大写；
填充：10px；
颜色：黑色；
游标：默认值；
边框：1px纯黑；
宽度：50px；
高度：50px；
}
@介质（最大宽度：769px）{
第n个孩子（3）{
位置：固定；
宽度：50px；
高度：50px；
右：10px；
底部：10px；
}
}

是否要将其固定在底部位置？最简单的方法是在手机大小下给它一个

fixed

的位置，然后把它放在右下角是的，我试过了，但没有成功。你是什么意思？为什么不起作用？发生了什么我相信现在有一个简单的方法来实现这一点。所有的解决方案都会有陷阱。在这种情况下，当我将菜单项设置为“固定”并设置底部0属性时，我发现创建两个元素确实是避免将来出现样式问题的最简单方法。菜单项不在页面底部这是我想要实现的myself@MegaRoks很高兴我能帮忙

nav {
      flex: 1;
      display: flex; 
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      user-select: none;

      div > a {
        align-items: center;
        margin: 0 10px;
      }

      a {
        font-weight: 600;
        font-size: rem(16);
        text-transform: uppercase;
        padding: 10px;
        color: $blueSemi;
        cursor: default;
      }
    }