Попробуй так изменить разметку:
...
/* Добавим data-header="M" к .masonry-item*/
<div class="col-lg-3 col-md-3 col-sm-3 col-xl-12 masonry-item" data-header="M">
/* <li class="header">M</li> Убрать из разметки*/
...
</div>
...
В своем стиле сделать псевдо елемент :before :
.masonry-item[data-header]:before {
content: attr(data-header);
display: block;
font-weight:bold;
}
Как вариант можно скинуть data-header в первый
li (
не в li c класом header - его быть не должно), и поменять селектор на
.masonry-item li[data-header]:before
P.S. В вопросе ставь код, а не скриншоты. Набирать наново лениво.
