Randomizing HTML in rows of three

Question

We're trying to randomize a series of listings, with rows of 3 items. We would like the entire list to appear randomly, breaking the line after 3 entries. We have everything working and displaying properly in HTML and CSS, but trying to apply some javascript is presenting a challenge.

HTML - Showing 2 rows of 3 items. Each row is currently wrapped in a parent container

$(document).ready(function(){
      $('ul').each(function(){
            // get current ul
            var $ul = $(this);
            // get array of list items in current ul
            var $liArr = $ul.children('li');
            // sort array of list items in current ul randomly
            $liArr.sort(function(a,b){
                  // Get a random number between 0 and 10
                  var temp = parseInt( Math.random()*10 );
                  // Get 1 or 0, whether temp is odd or even
                  var isOddOrEven = temp%2;
                  // Get +1 or -1, whether temp greater or smaller than 5
                  var isPosOrNeg = temp>5 ? 1 : -1;
                  // Return -1, 0, or +1
                  return( isOddOrEven*isPosOrNeg );
            })
            // append list items to ul
            .appendTo($ul);            
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row__full-width">
    <div class="third-width-block" style="background-image: url('someimage.jpg')">
        <span class="rectangle_top"></span>
        <div class="table">
        <h5 class="title">Item Title 1</h5>
            <div class="block_content">
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
            </div>
        </div>
    </div>
    <div class="third-width-block" style="background-image: url('someimage.jpg')">
        <span class="rectangle_top"></span>
        <div class="table">
        <h5 class="title">Item Title 2</h5>
            <div class="block_content">
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
            </div>
        </div>
    </div>  
    <div class="third-width-block" style="background-image: url('someimage.jpg')">
        <span class="rectangle_top"></span>
        <div class="table">
        <h5 class="title">Item Title 1</h5>
            <div class="block_content">
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
            </div>
        </div>
    </div>
</div>
<div class="row__full-width">
    <div class="third-width-block" style="background-image: url('someimage.jpg')">
        <span class="rectangle_top"></span>
        <div class="table">
        <h5 class="title">Item Title 4</h5>
            <div class="block_content">
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
            </div>
        </div>
    </div>
    <div class="third-width-block" style="background-image: url('someimage.jpg')">
        <span class="rectangle_top"></span>
        <div class="table">
        <h5 class="title">Item Title 5</h5>
            <div class="block_content">
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
            </div>
        </div>
    </div>  
    <div class="third-width-block" style="background-image: url('someimage.jpg')">
        <span class="rectangle_top"></span>
        <div class="table">
        <h5 class="title">Item Title 6</h5>
            <div class="block_content">
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
            </div>
        </div>
    </div>
</div>

Any help would be greatly appreciated!

Edit:

Progress. We've had some success using the script below, adjusting the HTML above where each "third-width-block" div also has "propertyBlock" as a class. We now just need to break the row after every 3rd entry, and we can do that easily by wrapping every three "propertyBlock" divs in a wrapper witdh "row_full-width" class.

Is there a way to insert that?

var cards = $(".propertyBlock");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}

Answer 1

I simplified your HTML and re-wrote the script. It grabs all of the divs and puts them into the .target div in a "random" order. I would suggest to use a proper shuffle like this Durstenfeld algorithm instead of this "arbitrary sort" function.

$(".piece")
 .get()
 .sort(()=> ~~(Math.random()*3)-1)
 .forEach(d=>$(".target")
  .append(d))

.piece {display:inline-block; width:30% }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="piece">one</div>
    <div class="piece">two</div>
    <div class="piece">three</div>
 </div>
 <div class="row">
    <div class="piece">four</div>
    <div class="piece">five</div>
    <div class="piece">six</div>
 </div>
<div class="row">
    <div class="piece">seven</div>
    <div class="piece">eight</div>
    <div class="piece">nine</div>
</div>

<div class="target"></div>