Html 需要这个简单的响应性设计需求的解决方案-在断点上移动DOM元素

我对以下响应性设计有疑问

根据下面的代码&在jsfiddle中也显示，默认情况下，在桌面上，我希望锚显示“Name”和“Login Time”。当分辨率低于480px时，“登录时间”不应显示在锚中，而是应显示为ul中的第一个列表项。 所以，为了实现这一点，我创建了一个额外的li作为第一个元素，它是隐藏的，在桌面上，当分辨率低于480px时，它就会显示出来，并且锚中的“登录时间”被隐藏

我的疑问是，这是获得这个东西的正确解决方案吗，对于这个，我需要在两个地方复制“登录时间”html，尽管一次隐藏一个

HTML:

---

在我看来，这是一个完美的解决方案。 据我所知，没有其他方法可以实现这一点（只有使用CSS）

如果希望为此使用jQuery，可以使用和来实现

与jQuery相比，我更喜欢这个CSS解决方案

---

是的，您必须在两个位置保留相同的代码，但在这种功能中，这是可以接受的。

“如果代码没有损坏，就不要修复它”-AbrahamLincoln@Abraham-如果一切正常，这是否意味着这应该是一个很好的选择。请确认。

<div>
    <a href="#">
        <p>Name</p>
        <p>Login Time</p>
    </a>
    <ul>
        <li>Login Time</li>
        <li>Help</li>
        <li>About</li>
        <li>Log out</li>
    </ul>
</div>

a {text-decoration:none; display:block; background:#333; color:#fff}
p{ margin:0px;}
ul{list-style-type:none; padding:0; background:#999}
ul li:first-child {display:none}

@media (max-width:480px){
a p:last-child {display:none}
ul li:first-child {display:block}
}