Foundation JS Orbits - show-for-small-only

Question

I am working on a website that uses Zurbs foundation js, sorry but I am not a fan of this framework but I am stuck with it on this.

Question. I have tried several times to either add in the orbit or on a containing div the class show-for-small-only but when I go to mobile view only the Arrow show, I have to refresh the page to see the orbit-container. I just used a normal orbit, here is a sample.

Is this typical of Orbits or am I missing something?

<div class="columns small-12 medium-10 text-center small-centered show-for-small-only">
<div class="orbit" role="region" aria-label="Test Orbit" data-orbit>
    <div class="orbit-wrapper">
        <div class="orbit-controls">
            <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button> 
        </div>
        <ul class="orbit-container">
            <li class="is-active orbit-slide"> 
            <div class="icon">
                <img src="assets/img/people.png"> 
                <p>
                    Human-safe<br />
                    Pet-safe
                </p>
            </div>
            </li>
            <li class="orbit-slide"> 
            <div class="icon">
                <img src="assets/img/beaker.png"> 
                <p>
                    Clean without chemicals
                </p>
            </div>
            </li>
            <li class="orbit-slide"> 
            <div class="icon">
                <img src="assets/img/hearthand.png"> 
                <p>
                    Leaves no toxic residue
                </p>
            </div>
            </li>
            <li class="orbit-slide"> 
            <div class="icon">
                <img src="assets/img/earth.png"> 
                <p>
                    Creates less waste
                </p>
            </div>
            </li>
            <li class="orbit-slide"> 
            <div class="icon">
                <img src="assets/img/gear.png"> 
                <p>
                    Anti-bacterial self-cleaning
                </p>
            </div>
            </li>
        </ul>
    </div>
</div>