Exercise that change leading sentence according to the width.

by makzan

HTML

<link rel="stylesheet" href="http://www.cdn.jsdelivr.net/foundation/5.2.3/css/foundation.min.css">
<p>Leading sentence here</p>
<article>
    <h1>Exercise</h1>
    <div class='content'>
        <p>This is an exercise that I want you to display the leading sentence with different content based on the screen width.</p>
        <p>An example here:</p>
        <p>When in wide screen, it displays “You’re reading a sample site, written by [Your Name] since 2014. Enjoy!”</p>
        <p>When in medium screen, it displays “A sample site, written by [Your Name] since 2014.”</p>
        <p>When in small screen, it displays “A sample site by [Your Name].”</p>    
        <p>This exercise is inspired from the <a href='http://signalvnoise.com'>Signal v. Noise</a> website.</p>
    </div>
</article>