Why isn't the flex-direction going from row to column - html

Question

I'm coding using the Front-ENd Web Development [The Big Nerd Ranch Guide] book to help me better understand css and javascript. There's a project where I'm learning how to use media queries and im suppose to changed the flex-direction property from a row to a column. I've copied the code as its shown and for some odd reason the code doesn't change the direction. It Follows everything before and after that piece of code. I'm hoping a extra pair of eyes can help me spot where I went wrong and help me understand media-queries & flexbox better.
<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

Add display:flex; at the top of class thumbnail-list in the css. This should solve the problem. At the moment you don't seem to be telling the css to use flexbox in the first place.