JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="dwButton" value="Get new data-weights">
<input type="button" id="sortButton" value="Sort by data-weights">
<div id="wrapper">
    <div class="article fix" data-weight="1">
        <img src="http://lorempixel.com/100/100/food/1" /> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://lorempixel.com/100/100/food/2" /> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://lorempixel.com/100/100/food/3"> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://lorempixel.com/100/100/food/4"> <span class="dw"></span>

    </div>
    <div class="article fixed" data-weight="1">
        <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/BNZCZsHJIR8?feature=oembed"></iframe> <span class="dw">1</span>

    </div>
</div>

CSS

div {
    padding-top:20px;
}
.article {
    width:100px;
}
.article img {
    width:100%;
    height:auto;
}

JavaScript

//assign new data-weights for later sorting
$("#dwButton").on("click", function () {
    var rand = 0;
    $('#wrapper .article:not(.fixed)').each(function () {
        rand = Math.random();
        $(this).attr('data-weight', rand);
        $(this).children('.dw').html(rand);
    });
});

$("#sortButton").on("click", function () {
    var $wrapper = $('#wrapper'),
        $articles = $wrapper.find('.article');
    [].sort.call($articles, function (a, b) {
        return +$(b).attr('data-weight') - +$(a).attr('data-weight');
    });
    $articles.each(function () {
        $wrapper.append(this);
    });
});