JSFiddle - React, Tailwind, and code Playground

HTML

<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 for="big"></label>
		
		
								<div class="blocks block-1" data-number="1" id="1"></div>
								<div class="blocks block-2" data-number="2" id="2"></div>
								<div class="blocks block-7" data-number="7" id="7"></div>
								
								<div class="blocks block-4" data-number="4" id="4"></div>
								
								<div class="blocks block-3" data-number="3" id="3"></div>
								<div class="blocks block-6" data-number="6" id="6"></div>
								<div class="blocks block-5" data-number="5" id="5"></div>
								
								<div class="blocks block-8" data-number="8" id="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;
}

.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;
  cursor: pointer;
}

.blocks.active {background: blue;}

.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: #a42a29;
}

input[id="big"]:checked ~ .blocks {
	width: 420px;
	height: 420px;

	line-height: 420px;
	font-size: 200px;

}

JavaScript

var a = document.querySelectorAll('div.blocks');
				for ( var i = 0; i < a.length; i++) {
	 			a[i].innerHTML = a[i].dataset.number;
				}


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 a = document.querySelectorAll('div.blocks');
				for ( var i = 0; i < a.length; i++) {
	 			a[i].innerHTML = a[i].dataset.number;
				}

	});
});

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'))
    });
		
		var a = document.querySelectorAll('div.blocks');
				for ( var i = 0; i < a.length; i++) {
	 			a[i].innerHTML = a[i].dataset.number;
				}

	});
});

$('.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() {
	$('.blocks.active').remove();
  $(this).attr('disabled', true);
});