Anna Arteeva

Да, копировала в два приема и кусок потеряла :-)
С версткой проблем нет, работает нормально, когда аккордеона нет, анимация видна, значит тоже работает.

<a class="list-group-item" role="button" data-toggle="collapse" href="#equipment" aria-expanded="false" aria-controls="equipment">Экипировка</a>
<div class="collapse" id="equipment">
<div class="ct-progressBar">
      <div class="ct-progressBar-content">
            <div class="progress">
                  <div class="progress-bar animating" role="progressbar" data-percentage="85" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
             </div>
      </div>
</div>
</div>

Когда нажимаем на < a >, становится
<div class="collapse in" id="equipment">. Я думаю отсюда можно отталкиваться. По-русски можно сказать так "Если .collapse.in=true, то включаем анимацию". Как это на JS сказать, я затрудняюсь.

По-моему в мире ноутбуков лучше Apple не бывает, Pro подойдет идеально, мощности у него больше чем может понадобиться для UI. Если можете себе позволить - покупайте. Никогда больше не сядете за винду.

На девайсах разных тоже может по-разному отображаться - на телефонах, ipad и т.д

Количество колонок не уменьшается, просто сетка сжимается пропорционально. А там вы выбираете сколько тот или иной элемент колонок будет занимать на заданном разрешении. Я бы посоветовала ознакомиться с гайдлайном бутстрапа (принцип у всех более или менее одинаковый) getbootstrap.com/css/#grid