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