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
(function(){
if($('body').width() > 768)
return;
var descr=$(".bl_symbolsTree__description li")
.map(function(){
return '<div>'+this.textContent+'</div>';
}).toArray().slice(2);
$('.bl_symbolsTree__branch ul').each(function(){
$(this).find('li:not(:eq(0),:eq(1))').each(function(index){
$(this).prepend(descr[index]||'');
});
});
})();