<ul class="wrap">
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here and will wrap around to next line</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others </p>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here and will wrap around to next line</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here but some items may have more text than others </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here and will wrap around to next line</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others Descriptive text goes here but
      some items may have more text than others </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
</ul>

<h2>Example 2 in smaller width wrapper</h2>

<ul class="wrap wrap2">
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here and will wrap around to next line</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others </p>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="text">Descriptive text goes here Descriptive text goes Descriptive text goes </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here and will wrap around to next line</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here but some items may have more text than others </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here and will wrap around to next line</h3>
    <p class="text">Descriptive text goes here</p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
  <li>
    <div class="image">Product image here</div>
    <h3>Title goes here</h3>
    <p class="text">Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others Descriptive text goes here but some items may have more text than others Descriptive text goes here but
      some items may have more text than others </p>
    <p class="meta">25th December 2015</p>
    <div class="footer"> <a href="#">Help</a> <b><a href="#">Order Now</a></b> </div>
  </li>
</ul>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
	margin:0 auto;
	padding:0;
	max-width:1680px;
	padding:10px;
	border:1px solid #000;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
.wrap2{max-width:500px;margin:auto;background:#ccc}
h3,p{margin:0 0 1em}
.image{height:150px;background:red;margin:10px 0;border:1px solid #000;}
.wrap li {
	margin:10px 1%;
	padding:10px;
	border:1px solid #000;
	display:inline-block;/* fallback */
	width:29%;/* fallback*/
	vertical-align:top;/* fallback*/
	display:flex;
	flex-direction:column;
	flex:1 0 29%;
	min-width:280px;/* doesn't work in ios so use media queries to go to one column */	
}
.footer {
	margin-top:auto;
  padding:10px;
  background:#333;
  color:#fff;
}
.footer b{float:right;}
.footer a{color:#fff}