Zurb Foundation - Base

by Alexandru Gatea

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"></script>
<div class="hide-for-small-only">This will only be visible on tablets and desktops</div>
<div class="show-for-small-only">This will only be visible on mobile phones Portrait</div>

<br> <br> <br>



<div class="container">
    <div class="row">
        <div class="columns small-6">
            <div class="hide-for-small-only">
                <img src="https://ps.w.org/custom-banners/assets/banner-772x250.png?rev=1101436" class="thumbnail" alt="">
            </div>
            <div class="show-for-small-only">
                <img src="https://static.thefabricator.com/mediakits/images/square-banner300x300.jpg" class="thumbnail" alt="">
            </div>
        </div>
        <div class="columns small-6">
            <div class="hide-for-small-only">
                <img src="https://ps.w.org/custom-banners/assets/banner-772x250.png?rev=1101436" class="thumbnail" alt="">
            </div>
            <div class="show-for-small-only">
                <img src="https://static.thefabricator.com/mediakits/images/square-banner300x300.jpg" class="thumbnail" alt="">
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).foundation();