I am clearly making some newbie mistakes setting up this gallery to work responsively on a bootstrap website page. 

It looks great in full browser mode, but as I make the screen width smaller, first my right column is covering the gallery, then even smaller, as the right column moves below the gallery, the gallery is still not responsive. 

Please see pics 1, 2 and 3 below.

Some helpful code to review here perhaps:
Is it my viewport tag?:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 
I realize this is not optimal but is hard to adjust since it is in the site template.  I can change this to the recommended

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

If needed.

Gallery code, perhaps it is the column code that is messing things up?

        <div class="row">
            <div class="col-12 col-sm-6">
<script src="West-Michigan-Camping-Gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
    baseUrl : 'West-Michigan-Camping-Gallery/',
containerId: "juicebox-container",
galleryWidth: "748",
galleryHeight: "850",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container"></div>

    </div>
    </div>

-----------------

-----------------

-----------------