Css - 在末尾移动第一个 <li> 元素[重复]答案

【问题标题】：Css - Move first <li> element at the end [duplicate]Css - 在末尾移动第一个 <li> 元素[重复]
【发布时间】：2020-02-17 23:07:48
【问题描述】：

我有这个代码：

    <ul class="careplus-infolist">
    <li>
        <i class="careplus-bgcolor-two fa fa-envelope"></i>
        <span><a href="mailto:info@email.com" target="_blank">info@email.com</a></span>
        <span><a href="mailto:info@pec.email.com" target="_blank">info@pec.email.com</a></span>                                        
    </li>
    <li>
        <i class="careplus-bgcolor-two fa fa-clock-o"></i>
        <span>9:00 - 13:00</span>
        <span>15:00 - 18:00 pm</span>  
    </li>
    <li>
        <i class="careplus-bgcolor-two fa fa-map-marker"></i>
        Main Street 22
        09030 Los Angeles CA  
    </li>
</ul>

我想将第一个 li 标签移动到列表的末尾。我的意思是在 li 标签之后包含电子邮件地址的 li 标签包含

主街 22 号 09030 加利福尼亚州洛杉矶

对于这个操作，我不能手动添加类，它是自动生成的代码，我只能使用 css（而不是 javascript）。

这是一个用于全屏视图的水平列表和一个用于移动视图的垂直列表

【问题讨论】：

标题不应该写"Move first <li> element to the end"吗？！因为最后一个已经在最后了;-)

标签： html css

【解决方案1】：

您可以使用CSS flex-direction，然后为li:first-child设置“顺序”

ul.careplus-infolist {
    display: flex;
    flex-direction: column;
}

ul.careplus-infolist li:first-child {
  order: 3;
}

<ul class="careplus-infolist">
<li>
    <i class="careplus-bgcolor-two fa fa-envelope"></i>
    <span><a href="mailto:info@email.com" target="_blank">info@email.com</a></span>
    <span><a href="mailto:info@pec.email.com" target="_blank">info@pec.email.com</a></span>                                        
</li>
<li>
    <i class="careplus-bgcolor-two fa fa-clock-o"></i>
    <span>9:00 - 13:00</span>
    <span>15:00 - 18:00 pm</span>  
</li>
<li>
    <i class="careplus-bgcolor-two fa fa-map-marker"></i>
    Main Street 22
    09030 Los Angeles CA  
</li>
</ul>

【讨论】：

这是一个很好的解决方案，但在 UI 中，这是一个水平列表。使用您的解决方案，它会将其转换为垂直列表。如果我尝试设置 flex-direction: row 它可以工作，但在移动视图中（带有响应视图）它会保持列表水平破坏整个布局。
@Paulie_D 正确，我已经编辑了问题
@C1X 请在问题中添加有关如何使列表水平的相关部分。有不同的方法，否则它将再次适用于我必须采取的假设
然后对 flex-direction 的媒体查询进行简单的添加即可解决额外的要求。
@C1X 看这里jsfiddle.net/suq5nj9e 你可以调整视图部分的大小，看到它从水平变为垂直，第一个孩子总是在最后