JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css">
<div class="container">
    <span>Сортировать по <a class="link1" href="#">возрастанию</a> | <a class="link2" href="#">убыванию</a></span>
    <div class="all-blocks">

        <input type="radio" name="size" value="small" id="small" checked>
        <label for="small"></label>

        <input type="radio" name="size" value="big" id="big">
        <label class="bigsize" for="big"></label>

        <div class="blocks block-1" data-number="1" id="1">1</div>
        <div class="blocks block-2" data-number="2" id="2">2</div>
        <div class="blocks block-3" data-number="3" id="3">3</div>
        <div class="blocks block-4" data-number="4" id="4">4</div>
        <div class="blocks block-5" data-number="5" id="5">5</div>
        <div class="blocks block-6" data-number="6" id="6">6</div>
        <div class="blocks block-7" data-number="7" id="7">7</div>
        <div class="blocks block-8" data-number="8" id="8">8</div>
    </div>

    <input type="button" value="Удалить" class="btn-del" disabled>

</div>

CSS

body {
    text-align: center;
}

.container {
    width: 900px;
    display: inline-block;
    padding: 20px 0;
    margin-top: 100px;
    background-color: #e1e1e1;
    text-align: right;
}

a {
    color: #1d69a7;
    text-decoration: none;
    border-bottom: 1px dashed #1d69a7;
}

a:hover {
    border: none;
}

.all-blocks {
    letter-spacing: -4px;
    position: relative;
    text-align: left;
}

.blocks {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #724734;
    margin-top: 20px;
    margin-right: 20px;
    text-align: center;
    line-height: 200px;
    font-size: 100px;
    color: #e1e1e1;
    z-index: 10;
}

.blocks:nth-of-type(1),
.blocks:nth-of-type(5) {
    margin-left: 20px;
}

input[id="big"]:checked ~ .blocks:nth-of-type(odd) {
    margin-left: 20px;
}

.btn-del {
    margin-top: 20px;
    display: inline-block;
    position: relative;
    left: -814px;
}

input[type="radio"] {
    display: none;
}

label[for="small"] {
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    bottom: -40px;
    right: 40px;
    background: url("http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png") 230px 0;
    vertical-align: middle;
}

label[for="big"] {
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    bottom: -40px;
    right: 0;
    background: url("http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png") 254px 0;
    vertical-align: middle;
    margin-right: 20px;
}

span {
    margin-right: 20px;
}

.active {
    background-color: brown;
}

input[id="big"]:checked ~ .blocks {
    width: 420px;
    height: 420px;
    line-height: 420px;
    font-size: 200px;
}

.emptySpace {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #937a66;
    outline: 1px dashed black;
    margin-top: 20px;
    margin-right: 20px;
    z-index: 1;
}

.emptySpace2 {
    display: inline-block;
    width: 420px;
 ...

JavaScript

var toaster2 = document.querySelector('a.link2');
toaster2.addEventListener('click', function() {
    $(function() {
        var div_conteiner = jQuery.makeArray($('.all-blocks div'));
        div_conteiner.sort(function(a, b) {
            var an = parseInt(a.dataset.number),
                bn = parseInt(b.dataset.number);
            var c = 0
            if (an > bn) c = -1;
            if (an < bn) c = 1;
            return c
        });

        $.map(div_conteiner, function(div) {
            $(div).appendTo($('.all-blocks'))
        });
    });
});

var toaster = document.querySelector('a.link1');
toaster.addEventListener('click', function() {
    $(function() {
        var div_conteiner = jQuery.makeArray($('.all-blocks div'));
        div_conteiner.sort(function(a, b) {
            var an = parseInt(a.dataset.number),
                bn = parseInt(b.dataset.number);
            var c = 0
            if (an > bn) c = 1;
            if (an < bn) c = -1;
            return c
        });

        $.map(div_conteiner, function(div) {
            $(div).appendTo($('.all-blocks'))
        });
    });
});

$('.blocks').on('click', function() {
    $(this).toggleClass('active');
    $('.btn-del').removeAttr('disabled');
    if (!$('.blocks').hasClass('active')) {
        $('.btn-del').attr('disabled', true);
    }
});


$('.btn-del').on('click', function() {
    $('.active').remove();
    $(this).attr('disabled', true);
});

var classname = 'emptySpace';

$('.bigsize').on('click', function() {
    var classname = 'emptySpace2';
});


$(function() {
    $('.all-blocks').sortable({
        placeholder: classname,
        containment: 'parent',
        items: '.blocks',
        grid: [10, 10]
    });

});