JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="mainWrapper">
  <div class="container">
    <nav class="bl_nav__full hidden-xs hidden-sm clearfix">
      <div class="row">
        <div class="col-sm-7" style="margin-left:-15px; margin-right:-15px">
          <div class="col-sm-4">
            <div class="bl_nav__point correct_leftBorder">
              <a href="#">бренд</a>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="bl_nav__point">
              <a href="#">лучший бонус </a>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="bl_nav__point">
              <button class="js-recoil icon-sorter" type="button" title="Сортировка по отдаче">отдача</button>
            </div>
          </div>
        </div>
        <div class="col-sm-5" style="margin-left:-15px; margin-right:-15px">
          <div class="col-sm-6">
            <div class="bl_nav__point">
              <button class="js-rating icon-sorter" type="button" title="Сортировка по рейтингу">рейтинг</button>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="bl_nav__point">
              <a href="#">ссылки </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <ul class="bl_companies__full clearfix">
      <li class="bl_companies__item">
        <div class="row">
          <div class="col-sm-7" style="margin-left:-15px; margin-right:-15px">
            <div class="col-sm-4">
              <a class="bl_companies__logo" href="#">
                <img class="bl_companies__img" src="image/volcano.png" alt="">
                <p class="bl_companies__name">казино1</p>
              </a>
            </div>
            <div class="col-sm-4">
              <div class="bl_companies__bonus">
                <p class="bl_companies__bonus_procent">100%</p>
                <p...

CSS

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: #000;
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
    color: #000;
  }
}

p {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

button {
  border: none;
  padding: 0;
  margin: 0;
}

.bl_nav__full {
  position: relative;
  clear: both;
  width: 100%;
  padding: 0 15px;
  margin-top: 35px;
  margin-bottom: 10px;
  margin-left: -15px;
  border: 2px solid transparent;
}

.bl_nav__point {
  position: relative;
  width: 100%;
  min-height: 28px;
  box-sizing: border-box;
  border-left: 2px solid #000;
}

.bl_nav__point a,
.bl_nav__point button {
  position: relative;
  display: block;
  margin: 0 auto;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  background: none;
  font-weight: 700;
  transition: .2s all;
}

.bl_nav__point a:hover,
.bl_nav__point a:focus,
.bl_nav__point button:hover,
.bl_nav__point button:focus {
  transition: .2s all;
  color: #5896cf;
  text-decoration: underline;
}

.bl_nav__point button {
  padding-right: 25px;
}

.correct_leftBorder {
  border-left: none;
}

.bl_companies__full {
  clear: both;
  display: block;
  width: 100%;
  background-color: #fff;
}

.bl_companies__full .col-sm-7 > div,
.bl_companies__full .col-sm-5 > div {
  height: 100%;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 5px;
  border-left: 2px solid #5a94c9;
}

.bl_companies__item {
  width: 100%;
  position: relative;
  border: 2px solid #5a94c9;
  padding: 15px 13px;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.bl_companies__img {
  display: block;
  margin: 0 auto;
}

.bl_companies__name {
  color: #5896cf;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  letter-spacing: 0.33px;
  font-weight: 600;
}

.bl_companies__bonus {
  color: #5896cf;
  font-weight: 400;
  text-align:...

JavaScript

window.onload = function() {

    var btnRating = $(".js-rating"),
        btnRecoil = $(".js-recoil"),
        companiesLength = $(".bl_companies__item").length;



    function currentFields(){
        var companies = new Array();
        for (var i=0; i< companiesLength; i++) {

            var currRaiting = $(".bl_companies__rating_current").eq(i).text();
            var currPoint =$(".bl_companies__recoil").eq(i).text().replace(',', '.');
            var currField =$(".bl_companies__item").eq(i).html();

            companies.push({'rating': currRaiting, 'point': currPoint, 'html': currField});
        }
        console.log(companies);
        return companies
    }


    var timer = 0;
    btnRating.on("click", function(){

        currentFields();


            var sortable = [];
            for (var sorteredRaiting in companies) {
                sortable.push([sorteredRaiting, companies[rating]]);
            }

            sortable.sort(function(a, b) {
                return a[1] - b[1];
            });

        console.log("sortable =" + sortable );


    });


};