Почему направление flex не идет от строки к столбцу

Question

Я пишу код, используя книгу Front-ENd Web Development [The Big Nerd Ranch Guide], чтобы помочь мне лучше понять css и javascript.Есть проект, в котором я изучаю, как использовать медиа-запросы, и я предполагаю изменить свойство flex-direction со строки на столбец.Я скопировал код, как показано, и по какой-то странной причине код не меняет направление.Это следует за всем до и после этого куска кода.Я надеюсь, что дополнительная пара глаз поможет мне определить, где я ошибся, и поможет мне лучше понять медиа-запросы и flexbox.

    <main class="main-content">
    <ul class="thumbnail-list">

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter1.jpg" alt="Barry The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barry</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter2.jpg" alt="Robin The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Robin</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter3.jpg" alt="Maurice The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Maurice</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter4.jpg" alt="Lesley The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Lesley</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter5.jpg" alt="Barbara The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barbara</span>
        </a>
      </li>



      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter1.jpg" alt="Barry The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barry</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter2.jpg" alt="Robin The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Robin</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter3.jpg" alt="Maurice The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Maurice</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter4.jpg" alt="Lesley The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Lesley</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter5.jpg" alt="Barbara The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barbara</span>
        </a>
      </li>

    </ul>
______________________________________________________________________________

CSS


@media all and (min-width: 768px){

  .main-content{
    flex-direction: row;
    overflow: hidden;

  }

  .thumbnail-list{
    flex-direction: column;
    margin-left: 20px;
    order: 0;

    }

    .thumbnail-item{
      max-width: 260px;

    }

    .thumbnail-item + .thumbnail-item{
      margin-top: 20px;

    }


  }

Answer 1

Добавьте display:flex; в начало класса thumbnail-list в css. Это должно решить проблему. В данный момент вы, похоже, не говорите css сначала использовать flexbox.