Need helping creating a Flex-box container that wraps and is even

Trying to create a 2 column, 3 row flexbox container for a food menu. The product elements (which should be 2 per row) do not wrap when shrunk. I'm looking for a way to create a wrapping layout using flexbox. Also, what would be the best way to use Media Queries for the product title to be displayed when the layout is shrunk for mobile-size?

I'm attaching my jsfiddle code:

https://jsfiddle.net/5ksd34nf/#&togetherjs=Ix1LEBTca6

(keep in mind without the images, the design changes so I'm attaching photos)

The HTML is:

`

<section class="menu-page" id="Menu">
    <div class="TitleWrapper">
      <h1 class="title">Menu</h1>
    </div>
    <div class="menu-list">

      <div class="product">
        <div class="imgwrapper">
          <img src="images/burger.jpg" alt="Burger" class="food-image">
        </div>
        <div class="text">
          <div class="product-content">
            <h3 class="name">Burgers</h3>
            <h3 class="price">10 &euro;</h3>
          </div>
          <div class="ptags">
            <p class="allergens">Allergens:</p>
            <p class="info">Milk, Gluten</p>
          </div>
        </div>
      </div>

How can I space out the Price from the Name using flexbox?