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;


    btnRating.on("click", function(){
       var objRaiting = {};
        var arrRaiting = [];

       $(".bl_companies__rating_current").each(function (index) {
           // objRaiting[index] = $(this).text();
           arrRaiting.push($(this).text());
           // return objRaiting;
           return arrRaiting
       });
        // console.log("objRaiting  =" + objRaiting );
        console.log("arrRaiting  =" + arrRaiting );

        var newSortedRaiting = [];

        function sortBubble(data){
            for (var i = data.length - 1; i>0; i--){
                var counter =0;
                for(var j= 0; j<i; j++){
                    if(data[j]> data[j+1]){
                        var tmp = data[j];
                        data[j] = data[j+1];
                        data[j+1] = tmp;
                        counter++;
                    }
                }
                if (counter===0){
                    break;
                }

            }
            return arrRaiting;
        }

        sortBubble(arrRaiting);

        var newSortedRaiting = arrRaiting;
        console.log(newSortedRaiting);
        
    });