Не удается выровнять повернутый текст в сетке Bootstrap 4

Question

У меня есть сетка с использованием сетки Bootstrap 4, которую я хочу выглядеть следующим образом:

У меня почти 100% ее завершено,проблема, которую я имею, является выравниванием вертикально повернутого текста, перекрывает цветовую сетку. Я использую Bootstrap Extensions content rotate для поворота текста. Я просто не могу понять, как выровнять метки.

Вот кодовая загадка: https://www.codeply.com/go/Xd4pcADxml

Answer 1

Вместо класса "rotate-sm-l-90" я добавил пользовательские CSS для меток.

.vertical-label {
transform: rotate(-180deg);
writing-mode: vertical-lr;
padding: 16px;

}

Вот результат