Menu icon Foundation
.small-order-$ class not responding

Hi all! I seem to be having some issues with reordering my content when it's in a small viewer. 

<div class="row">
  <div class="small-12 medium-4 columns small-order-2 medium-order-1">
    <h4>sandy fishnets</h4>
    <p>After my thesis was finished, the artists ... official music video for it.</p>
    <p><i>Sandy Fishnets</i> is a story of a young girl ... this video in 2011.</p>
  </div>
  <div class="small-12 medium-8 columns small-order-1 medium-order-2">
    <div class="flex-video widescreen vimeo">
      <iframe src="https://player.vimeo.com/video/24585139?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
</div>

When I show the code in a small viewer, it presents as if I didn't write the order classes at all.

small-view-screenshot

It looks the way I want it to though in normal view.

normal-view

 

Thanks for any help you can provide. 

-Vince

 

order classeshelphtml

Hi all! I seem to be having some issues with reordering my content when it's in a small viewer. 

<div class="row">
  <div class="small-12 medium-4 columns small-order-2 medium-order-1">
    <h4>sandy fishnets</h4>
    <p>After my thesis was finished, the artists ... official music video for it.</p>
    <p><i>Sandy Fishnets</i> is a story of a young girl ... this video in 2011.</p>
  </div>
  <div class="small-12 medium-8 columns small-order-1 medium-order-2">
    <div class="flex-video widescreen vimeo">
      <iframe src="https://player.vimeo.com/video/24585139?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
</div>

When I show the code in a small viewer, it presents as if I didn't write the order classes at all.

small-view-screenshot

It looks the way I want it to though in normal view.

normal-view

 

Thanks for any help you can provide. 

-Vince