Black_Star,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bl_companies__full {
display: flex;
flex-wrap: wrap;
flex-direction: column;
list-style: none;
}
.bl_companies__full li {
width: 25%;
border: 2px solid #5a94c9;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function f(b, c) {
g.sort(function(a, d) {
a = a.querySelector(b).textContent.replace(",", ".").replace(/[^\d.]/g, "");
d = d.querySelector(b).textContent.replace(",", ".").replace(/[^\d.]/g, "");
return c ? d - a : a - d;
}).forEach(function(a,i) {
a.style.order = i
});
}
var e = document.querySelector(".bl_companies__full"), g = [].slice.call(e.querySelectorAll("li"), 0);
[{a:".js-rating", b:".bl_companies__rating_current"}, {a:".js-recoil", b:".bl_companies__recoil"}].forEach(function(b) {
var c;
document.querySelector(b.a).addEventListener("click", function() {
c = !c;
f(b.b, c);
});
});
});
</script>
</head>
<body>
<button class="js-recoil icon-sorter" type="button" title="Сортировка по отдаче">отдача</button>
<button class="js-rating icon-sorter" type="button" title="Сортировка по рейтингу">рейтинг</button>
<ul class="bl_companies__full">
<li><p class="bl_companies__recoil">45,4</p><span class="bl_companies__rating_current">2</span></li>
<li><p class="bl_companies__recoil">87,3</p><span class="bl_companies__rating_current">4</span></li>
<li><p class="bl_companies__recoil">88,3</p><span class="bl_companies__rating_current">4</span></li>
<li><p class="bl_companies__recoil">77,2</p><span class="bl_companies__rating_current">3</span></li>
</ul>
</body>
</html>