title: CSS - change div's display from grid to flexbox with media queries
body: <p>I have a div that is a css grid container. When the page width drops below a certain size, I would like all elements of the grid to be placed on a line. I think you should be able to change the display type to flex box, I tried doing this and the grid stays the same. Here is the code I am using: </p>
  
  See the Pen <a href="https://codepen.io/MeaningOf42/pen/NYjOmL/" rel="nofollow noreferrer">NYjOmL</a> by biltimi@gmail.com (<a href="https://codepen.io/MeaningOf42" rel="nofollow noreferrer">@MeaningOf42</a>) on <a href="https://codepen.io" rel="nofollow noreferrer">CodePen</a>.</p>
  
  
  
  <pre><code>/* The important part of the CSS*/
  
  @media (max-width: 40em) {
      .image {
          visibility:hidden;
      }
  
      .grid-container {
          display: inline-flex;
      }
  }
  
  /* The Styling of the container class: */
  .grid-container {
      display: grid;
      width: 75%;
      margin: auto;
      padding: 10px;
      height: 100px;
      grid-template-columns: 16.6% 16.6% 33% 16% 16%;
      grid-template-rows: 2fr 3fr 3fr 1fr;
      grid-template-areas:
        ". . Image . ."
        "blog bikes Image about links"
        "shop events Image contact team"
        ". . Image . ."
  }
  </code></pre>
  
  <p>For context, I am trying to replicate deaf pigeon's website ( <a href="http://www.deafpigeon.co.uk" rel="nofollow noreferrer">http://www.deafpigeon.co.uk</a>) using as close to pure vanilla HTML and CSS to practice laying out pages. I want my div to do the same thing as the deaf pigeon navigation bar.</p>
  
  <p>Does anyone have solutions? I might be going about this the wrong way if so be sure to let me know.</p>