Move the first list item to the bottom in an unordered list when browsing in tablet/mobile screen size

Question

I have an unordered list like this -

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

I would like the first item of the list be automatically moved to the last when the website is being browsed in tablet/mobile screen view, and automatically moved back to the top when changing back to desktop screen view, i.e. responsive. The output in tablet/mobile screen view should be like this -

<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 1</li>
</ul>

May I know it this can be achived by using JavaScript/CSS? Thank you.

Answer 1

Use order properties to achieve this

@media(max-width: 991px){ /*you can change width according to your requirement*/
  ul {
    display: flex;
    flex-direction: column;
  }
  ul li:first-child {
    order: 4;
  }
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>