title: Foundation 5 - change direction of dropdown with JQuery for small to medium screens
body: <p>I have implemented a left hand menu which consists of multiple dropdowns which align to the right, so its like a fly out menu.  On a large screen this works fine.  On a small screen Foundation automatically changes the dropdown to align to the bottom, which also works fine.  </p>
  
  <p>However, on a medium screen ie, tablet, the dropdown still tries to align to the right but the majority of it is off screen and cannot be selected.  I would therefore like to have it so that the dropdown automatically aligns to the bottom on a small and medium screen.  </p>
  
  <p>How can I do this with JQuery?</p>
  
  <pre><code>&lt;ul class="side-nav nav-bar vertical"&gt;
  &lt;li&gt;
  &lt;a href="#" data-options="is_hover:true;align:right;" data-dropdown="drop_2464272"&gt;Components&lt;/a&gt;
  &lt;ul id="drop_2464272" class="small f-dropdown" data-dropdown-content&gt;
  &lt;li&gt; &lt;a href="#"&gt;Accessories for tower cases&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt; &lt;a href="#"&gt;Cooling&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  &lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have tried the following bt nothing happens:</p>
  
  <pre><code> $(".side-nav").data('options', "is_hover:true;align:bottom;");
  </code></pre>