Css - Move first
element at the end

Question

i have this code:

    <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>

I want to move the first li tag to the end of the list. I mean the li tag that contains email addresses after the li tag that contains

Main Street 22 09030 Los Angeles CA

For this operation i can't add classes manually, it is autogenerate code and i can use only css ( not javascript).

This is an horizontal list for a full screen view and a vertical list for mobile view

score 2 · Accepted Answer · answered Feb 17 '20 at 14:34

2

You can use CSS flex-direction and then set the "order" for the 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>

answered Feb 17 '20 at 14:34

caramba

21,963
19
86
127

it is a good solution but in UI this is an horizontal list.. and with your solution it transforms it in a vertical list. If i try to set flex-direction: row it works but in the Mobile view ( with a responsive view ) it keeps the list horizontally ruining the whole layout. – C1X Feb 17 '20 at 14:54
@Paulie_D correct, i have edited the question – C1X Feb 17 '20 at 15:08
@C1X please add the relevant part on how you made the list horizontal also to the question. There are different ways, otherwise it will again just work for the assumption I have to take – caramba Feb 17 '20 at 15:13
Then a simple addition to your media query on the flex-direction solves the additional requirement. – Paulie_D Feb 17 '20 at 15:13
@C1X see here https://jsfiddle.net/suq5nj9e/ you can resize the view part and see it change from horizontal to vertical, first-child always at the end – caramba Feb 17 '20 at 15:18

Css - Move first element at the end

1 Answers1

Css - Move first
element at the end