JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bl_symbolsTree__full">
  <div class="bl_symbolsTree__table">
    <ul class="bl_symbolsTree__description">
      <li>Символ</li>
      <li>Название символа</li>
      <li>Выпадение 5х</li>
      <li>4х и 1 любой символ</li>
      <li>3х и 2 любых символа</li>
      <li>2х и 3 любых символа</li>
    </ul>
    <ul class="bl_symbolsTree__value">
      <li class="bl_symbolsTree__branch">
        <ul>
          <li><img class="bl_symbolsTree__img" src="image/SymbolTree/symbol-bee.png" alt="foto"></li>
          <li>
            <p class="bl_symbolsTree__name">Пчела</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">5000 очков</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">1000 очков</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">80 очков</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">10 очков</p>
          </li>
        </ul>
      </li>
      <li class="bl_symbolsTree__branch">
        <ul>
          <li><img class="bl_symbolsTree__img" src="image/SymbolTree/symbol-snail.png" alt="foto"></li>
          <li>
            <p class="bl_symbolsTree__name">Улитка</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">1000 очков</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">200 очков</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">30 очков</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">5 очков</p>
          </li>
        </ul>
      </li>
      <li class="bl_symbolsTree__branch">
        <ul>
          <li><img class="bl_symbolsTree__img" src="image/SymbolTree/symbol-butterfly.png" alt="foto"></li>
          <li>
            <p class="bl_symbolsTree__name">Бабочка</p>
          </li>
          <li>
            <p class="bl_symbolsTree__atr">5000 очков</p>
          </li>
          <li>
            <p...

SCSS

li{
    list-style-type: none;
}
.bl_symbolsTree{
  margin: 10px auto;
  width: 100%;


}

.bl_symbolsTree__full{
  font-family:Roboto;
  color: #000;
  font-weight: 400;

  h2{
    margin: 10px 0;
    font-size: 28px;
    color: #efefef;
    font-weight: 700;
  }

  p{
    margin-bottom: 10px;
  }

}


.bl_symbolsTree__button{
  background-color: #136edc;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  outline: none;
}
.bl_symbolsTree__button:hover,
.bl_symbolsTree__button:focus{
  background-color: #0a81ff;
}



.bl_symbolsTree__table{
  position: relative;
  width: 100%;
  margin: 10px auto;

}

.bl_symbolsTree__description{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  border-bottom: 1px solid #949ea9;
}



.bl_symbolsTree__description li,
.bl_symbolsTree__branch ul li{
  display: flex;flex-direction: column;
  justify-content: center;
  margin: 10px auto;
}


.bl_symbolsTree__description li:nth-of-type(1),
.bl_symbolsTree__branch ul li:nth-of-type(1){
  width: 15%;
}
.bl_symbolsTree__description li:nth-of-type(2),
.bl_symbolsTree__branch ul li:nth-of-type(2){
  width: 15%;
}


.bl_symbolsTree__description li:nth-of-type(n+3),
.bl_symbolsTree__branch ul li:nth-of-type(n+3){
  width: 17.5%;
}

.bl_symbolsTree__branch.bl_symbolsTree__superSymbol ul{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.bl_symbolsTree__branch.bl_symbolsTree__superSymbol ul li:nth-of-type(n+3){
  width: 70%;
}


.bl_symbolsTree__img{
  align-self: center;
}

.bl_symbolsTree__branch{
  width: 100%;
  border-bottom: 1px solid #949ea9;
  text-align: center;
}
.bl_symbolsTree__branch ul{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media only screen and (max-width: 768px) {
    .bl_symbolsTree__description{
    display: none;
  }

  .bl_symbolsTree__branch{
    border-width: 2px;
    margin-bottom: 10px;
  }

 ...

JavaScript

if (body.width() <= 768) {

   var symbolsTreeDescriptionItems = $(".bl_symbolsTree__description li"),
     symbolsTreeBranchesWithoutUnicSymbols = $(".bl_symbolsTree__branch:not('.bl_symbolsTree__superSymbol')"),
     symbolsTreeDescriptionValueText = [],
     symbolsTreeBranches = $(".bl_symbolsTree__branch");

   for (i = 2; i < symbolsTreeDescriptionItems.length; i++) {
     var descriptionText = symbolsTreeDescriptionItems.eq(i).text();
     symbolsTreeDescriptionValueText.push(descriptionText);
   }

   console.log(symbolsTreeDescriptionValueText);
   console.log(" symbolsTreeBranchesWithoutUnicSymbols =" + symbolsTreeBranchesWithoutUnicSymbols.length);


   for (i = 0; i < symbolsTreeDescriptionValueText.length; i++) {
     var currentAtr = symbolsTreeDescriptionValueText.eq(i).find(".bl_symbolsTree__atr");

     console.log(currentAtr);
   }

 }