JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css">
<script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>
<script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
<script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
<div class="row">
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 5]"/> <p></p>
</div>
</p>
</div>
<div class="row">
<p>
<div class="large-4 small-6 columns">
<img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
<p>Lorem sorum Lorem sorum Lorem sorum Lorem sorum </p>
</div>
<div class="large-4 small-6 columns">
<img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
<p>Lorem sorum Lorem sorum Lorem sorum Lorem sorum </p>
</div>
<div class="large-4 small-6 columns">
<img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
<p>Lorem sorum Lorem sorum Lorem sorum Lorem sorum </p>
</div>
</p>
</div>
CSS
@media all and (max-width: 320px){
.columns {
float:none !important;
}
.small-6{
width:100%;
}
}
JavaScript
$(document).foundation();
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);