Вращение списка-группы по вертикали в Bootstrap

Question

простой HTML-код работает нормально и показывает набор строк:

<div class="card">
  <div class="card-block">
    <ul class="list-group" role="group" aria-label="Basic example">
      <li class="rotated list-group-item d-flex">Primary</li>
      <li class="rotated list-group-item d-flex">Secondary</li>
      <li class="rotated list-group-item d-flex">Success</li>
      <li class="rotated list-group-item d-flex">Info</li>
      <li class="rotated list-group-item d-flex">Warning</li>
      <li class="rotated list-group-item d-flex">Danger</li>
    </ul>
  </div>
</div>

когда я добавляю следующее css, элементы списка становятся вертикальными, но все накладываются друг на друга.

.rotated {
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

как я могу исправить эту ситуацию, чтобы элементы правильно отображались в виде столбцов, а не строк. Спасибо!

.card-deck {
  height: 200px;
}

.rotated {
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="card-deck">
<div class="card">
  <div class="card-block">
    <ul class="list-group" role="group" aria-label="Basic example">
      <li class="rotated list-group-item d-flex">Primary</li>
      <li class="rotated list-group-item d-flex">Secondary</li>
      <li class="rotated list-group-item d-flex">Success</li>
      <li class="rotated list-group-item d-flex">Info</li>
    </ul>
  </div>
</div>
</div>
</div>

Answer 1

только что понял это. Вместо этого я переместил повернутый класс в список-группу:)

<div class="card">
  <div class="card-block">
    <ul class="rotated list-group" role="group" aria-label="Basic example">
      <li class="list-group-item d-flex">Primary</li>
      <li class="list-group-item d-flex">Secondary</li>
      <li class="list-group-item d-flex">Success</li>
      <li class="list-group-item d-flex">Info</li>
      <li class="list-group-item d-flex">Warning</li>
      <li class="list-group-item d-flex">Danger</li>
    </ul>
  </div>
</div>