Can't get flex-wrap to function correctly with this code

<section> <div class="header"> <div class="col"> <h2>Lorem</h2> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="col"> <h2>Lorem</h2> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="col"> <h2>Lorem</h2> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> </div> </section>

CSS:

.header { display: flex; flex-wrap: wrap; }

I was expecting each div with class "col" to display in a row, and then wrap as the viewport size decreased. This is what usually happens when I use the property, like when I completed the flexbox layout course. Here, when I add the flex-wrap property it seems to "cancel out" the default behavior of the flex container, and all elements are displayed as standard.

Thanks for any help!