<!-- This demo uses flex grid but you can use float grid too -->
<div class="row">
<div class="columns">
<h2>Interchange</h2>
<p>Interchange uses media queries to dynamically load responsive content that is appropriate for the user's device.</p>
<div class="callout primary">
<p>Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Using Interchange, you can serve up specific images for users depending on their screen size. CSS media queries are used to determine what size the user's device is, and which image should be served.</p>
</div>
</div>
</div>
<div class="row">
<div class="columns">
<img data-interchange="[//foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg, small], [//foundation.zurb.com/sites/docs/assets/img/interchange/medium.jpg, medium], [//foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg, large]">
</div>
</div>
/* Demo Styles */
body {
padding: 2rem 1rem;
}
$(document).foundation();
Also see: Tab Triggers