Переход не установлен в BS4 4.3.1 CDN

Question

Я использую следующую BS4 версии 4.3.1 CDN на моей странице:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

У меня на странице есть следующий html-компонент:

<div class="container">
    <div class="card">
        <div class="card-header">
            <a data-toggle="collapse" href="#flex-content" aria-expanded="true" aria-controls="flex-content" id="flex-content-link" class="d-block">
                <i class="fa fa-chevron-down fa-lg float-right"></i>
                <h5 class="card-title">Card Title</h5>
            </a>
            <hr>
        </div>

        <div id="flex-content" class="collapse show" aria-labelledby="flex-content-link" style="">
            <div class="card-body">
                <p>Some basic content</p>
                <p>Some basic content</p>
                <p>Some basic content</p>
            </div>
        </div>
    </div>
</div>

и JavaScript, примененный к странице:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Тем не менее, следующий CSS из CDN отменяет основной эффект перехода, когда я пытаюсь переключить (показать / скрыть) свои элементы:

  @media (prefers-reduced-motion: reduce) {
    .collapsing {
      transition: none; } }

... поверх источника перехода, как показано ниже ...

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease; }

Почему это происходит?

Спасибо за любые советы!