Display an item from a list of items

I have a sample:

link

I want the item with the "item-extra" class to be randomly displayed in the item list.

Now, the code rearranges all the elements.

I want the rest to remain fixed and only the one with the "item-extra" class will be moved to each page reload.

var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
  ul.appendChild(ul.children[Math.random() * i | 0]);
}

.item-extra {
  color: red;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li class="item-extra">item extra</li>
</ul>