title: CSS Flexbox Not Breaking on Smaller Device Screens
body: <p>I have tried the flexbox layout on these boxes and it is not working as intended. I have tried the <code>flex-direction: row</code> and <code>flex-direction: column</code> to get them to break into 3 vertical boxes cleanly but I must be doing something wrong.</p>
  <p>Do I need to add media queries to this as well to get them to conform?</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 2px;
    margin: 0;
  }
  
  .cell {
    width: 33.333%;
    word-wrap: break-word;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
  
  .product-grid .item {
    background: #ffffff;
    position: relative;
  }
  .product-grid .cell .item:nth-child(even) {
    background: #eeebe7;
  }
  .product-grid .item .thumb {
    width: 100%;
    text-align: left;
    padding: 0px;
  }
  .product-grid .item .con {
    position: absolute;
    right: 20px;
    top: 40px;
    text-align: right;
  }
  .product-grid .item .con2 {
    position: absolute;
    right: 20px;
    top: 40px;
    text-align: right;
  }
  .product-grid .item h1 {
    color: #000000;
    font-size: 32px;
    margin: 0;
  }
  .product-grid .item h2 {
    color: #9fa163;
    font-size: 22px;
    margin: 0;
  }
  .product-grid .item .btn-details {
    position: absolute;
    right: 50px;
    bottom: 30px;
  }
  .product-grid .item h2 {
    color: #a46a6a;
  }
  .product-grid .item .btn-details {
    background-image: url(images/plus2.png);
  }
  
  .btn-details {
    background: url(images/plus1.png) right center no-repeat;
    padding: 5px 44px 5px 0;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: "Oswald", sans-serif;
    color: #000000;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="product-grid"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="item"&gt;
        &lt;div class="thumb"&gt;&lt;a href="https://ripelifewines.com/product/un-oaked-chardonnay/"&gt;&lt;img class="alignnone" src="http://ripelifewines.com/wp-content/uploads/2016/12/Un-Oaked-Chardonnay2.png" alt="" width="366" height="400" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="con"&gt;
          &lt;h2&gt;Un-Oaked Chardonnay&lt;/h2&gt;
          &lt;h1&gt;The Clambake&lt;/h1&gt;
        &lt;/div&gt;
        &lt;a class="btn-details" href="https://ripelifewines.com/product/un-oaked-chardonnay/"&gt;See wine details&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="item"&gt;
        &lt;div class="thumb"&gt;&lt;a href="https://ripelifewines.com/product/limited-edition-rose/"&gt;&lt;img class="alignnone" src="http://ripelifewines.com/wp-content/uploads/2016/12/Limited-Edition-Rose2.png" alt="" width="370" height="400" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="con"&gt;
          &lt;h2&gt;Limited Edition Rosé&lt;/h2&gt;
          &lt;h1&gt;The Clambake&lt;/h1&gt;
        &lt;/div&gt;
        &lt;a class="btn-details" href="https://ripelifewines.com/product/limited-edition-rose/"&gt;See wine details&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="item"&gt;
        &lt;div class="thumb"&gt;&lt;a href="https://ripelifewines.com/product/moules-marinieres-brut-sparkling-wine/"&gt;&lt;img class="alignnone" src="https://ripelifewines.com/wp-content/uploads/2020/10/admin-ajax.png" alt="" width="366" height="400" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="con2"&gt;
          &lt;h2&gt;Brut Sparkling Wine&lt;/h2&gt;
          &lt;h1&gt;Moules Marinières&lt;/h1&gt;
        &lt;/div&gt;
        &lt;a class="btn-details" href="https://ripelifewines.com/product/moules-marinieres-brut-sparkling-wine/"&gt;See wine details&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>