I wanted to know how to do for each page refresh .class to be moved

I did a very simple way to do this. See if it suits your example:

$('.item').each(function(i){
      var rdm = Math.floor(Math.random()*$('.item').length-1)
      $(this).before($('.item').eq(rdm));
})

In this case, just change the class .item to the desired one. To leave only the first class item, just do this:

$('.item').not('.item:first').hide();

Demo - JsFiddle

Another option

Ney, correct me if I'm wrong, but its purpose seemed to me to be: to hide all the elements of a class, but leaving the show only one element and that the choice of it is random. If so, you can simply do this:

$(document).ready(function(){
    var rdm = Math.floor(Math.random()*$('.item').length-1)
    $('.item').not($('.item').eq(rdm)).hide();
})

JsFiddle

In JsFiddle just give a run that it will randomly change the order.

But for what you have in the question, goes the first option. And another thing, to get a better view remove the br .

Example with JQuery:

$().ready(function() {
	str = ".<br>.<br>.<br>";
	e = $("#content").find($("br"));
	p = Math.floor((Math.random() * e.length));
	l = e.length - 1;
	//console.log(e.length, p, l);
	$.each(e, function(key, val){
		//console.log("key "+key, "v: "+val);
		if (key == p)
			(key == l)? $(this).prev().after(str) : $(this).after(str);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="content">
class 1<br>
class 2<br>
class 3<br>
class 4<br>
</div>

I tried to do something that was less invasive, that is, I did not have to modify the current code.

To make it easier, you just have to put the content inside a <div> with an ID, so JQuery knows where to get the elements.

Note also that the script is careful to identify the returned position of randomness. The basic logic is to add elements, however, when the position is last <br> (class4), the elements would be in the back. So when the position is the penultimate or the last position, it will always result in

class 1<br>
class 2<br>
class 3<br>.<br>.<br>.<br>
class 4<br>

If you want to change this behavior, just change the conditional:

(key == l)? $(this).prev().after(str) : $(this).after(str);

Switch to this:

$(this).after(str);

There are some techniques for shuffling an array, my favorite makes use of Array.protorype.sort with Math.random() .

Array.prototype.shuffle = function () {
  return this.sort(function () {
    return 0.5 - Math.random();
  });
}

var tmplItem = document.getElementById("tmplItem").content;
for (var indice = 1; indice <= 20; indice++) {
  var card = document.importNode(tmplItem, true).querySelector(".card");
  document.body.appendChild(card);
  
  var text = card.querySelector(".content span");
  card.classList.add("class" + indice);
  text.textContent = "Item " + indice;
}

Array.prototype.shuffle = function () {
  return this.sort(function () {
    return 0.5 - Math.random();
  });
}

//transformar uma NodeList em Array.
var cards = [].slice.call(document.querySelectorAll(".card"));

//Embaralhando o Elementos e reinserindo os eles na pagina.
cards.shuffle().forEach(function (card, item) {  
  document.body.appendChild(card);
});

.card {
  position: relative;
  width: calc(100% - 20px);
  height: 128px;
  box-sizing: border-box;
  margin: 10px;
  
  box-shadow: 0px 0px 5px black;
  background-color: white;
}

.card .icon {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 128px;
  width: 128px;
  
  background-image: url('http://cdn.flaticon.com/svg/34/34239.svg');
  background-size: calc(100% - 10px);
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid gainsboro;
}

.card .content {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 40px;
  left: 128px;
  
}

.card .content span {
  line-height: 88px;
  padding-left: 10px;
  font-size: 24px;
  font-weight: bold;
}

.card .menu {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 40px;
  left: 128px;
  border-top: 1px solid gainsboro;
}

<template id="tmplItem">
  <div class="card">
    <div class="icon">

    </div>
    <div class="content">
      <span></span>
    </div>
    <div class="menu">
      
    </div>
  </div>
</template>