0

i have this code:

    <ul class="careplus-infolist">
    <li>
        <i class="careplus-bgcolor-two fa fa-envelope"></i>
        <span><a href="mailto:[email protected]" target="_blank">[email protected]</a></span>
        <span><a href="mailto:[email protected]" target="_blank">[email protected]</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

Improve this question
1
  • 1
    Shouldn't the title say "Move first <li> element to the end" ?! Cause the last is already at the end ;-)
    – caramba
    Commented Feb 17, 2020 at 14:42

1 Answer 1

Reset to default
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:[email protected]" target="_blank">[email protected]</a></span>
    <span><a href="mailto:[email protected]" target="_blank">[email protected]</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>

Improve this answer
5
  • 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
    Commented Feb 17, 2020 at 14:54
  • @Paulie_D correct, i have edited the question
    – C1X
    Commented Feb 17, 2020 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
    Commented Feb 17, 2020 at 15:13
  • Then a simple addition to your media query on the flex-direction solves the additional requirement.
    – Paulie_D
    Commented Feb 17, 2020 at 15:13
  • @C1X see here jsfiddle.net/suq5nj9e you can resize the view part and see it change from horizontal to vertical, first-child always at the end
    – caramba
    Commented Feb 17, 2020 at 15:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.