JSFiddle - React, Tailwind, and code Playground

HTML

<p>CSS hides <strong>#wrapper</strong> if viewport is below 500 pixels.</p>
<div id="wrapper">
    <p>jQuery checks CSS to see if <strong>#wrapper</strong> is visible and loads image on page refresh.</p>
    <p>I'm looking for a way to run this function without needing to refresh the page. I've looked into using (resize) funciton, but this duplicate the content.</p>
</div>

CSS

#wrapper {
    visibility: none;
    display: none;
}

@media only screen and (min-width: 500px){
    #wrapper {
            visibility: visible;
            display: block;
            }}

JavaScript

$(function() {

var element = $(this).find('#wrapper');

if (element.is(':visible')) {
    $('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
}

});