title: How to change position of Semantic UI sidebar for different screen sizes?
body: <p>I am using a Semantic UI sidebar —  it's a standard setup:</p>
  
  <pre><code>       &lt;div class="ui inverted labeled icon right inline vertical sidebar menu"&gt;
            &lt;a class="item"&gt;
              &lt;i class="home icon"&gt;&lt;/i&gt;
              Home
            &lt;/a&gt;
            &lt;a class="item"&gt;
              &lt;i class="block layout icon"&gt;&lt;/i&gt;
              Topics
            &lt;/a&gt;
            &lt;a class="item"&gt;
              &lt;i class="smile icon"&gt;&lt;/i&gt;
              Friends
            &lt;/a&gt;
            &lt;a class="item"&gt;
              &lt;i class="calendar icon"&gt;&lt;/i&gt;
              History
            &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>There is also a <a href="http://jsfiddle.net/psychomachine/8mwbd5f4/6/" rel="nofollow" title="JSFiddle">JSFiddle</a> here. </p>
  
  <p>Semantic UI positions its sidebar with classes <code>right</code>, <code>left</code>, <code>top</code> and <code>bottom</code>. I would like to have the sidebar positioned <code>right</code> for tablets and computers, and <code>top</code> on mobile devices. </p>
  
  <p>What would be the best way to control the position of the sidebar based on the screen size? In other words, how could one position the sidebar on top for mobiles, and leave it on the right for other screen sizes?</p>
  
  <p>Semantic UI has css classes <code>mobile only</code>, <code>tablet only</code> for showing/hiding content. But that's not enough here, because the sidebar is triggered by JavaScript like this:</p>
  
  <pre><code>$('.ui.sidebar')
    .sidebar({
      context: $('.bottom.segment')
    })
    .sidebar('attach events', '.menu .tS')
  ; 
  </code></pre>
  
  <p>so I'm guessing I need some kind of combination of JS and css to achieve the dynamic positioning of the sidebar based on the screen size, but I just haven't been able to get there.</p>
  
  <p>I'd be grateful for your suggestions. I'm especially interested in what would be considered the most elegant solution from the point of view of Semantic UI.</p>
  
  <p>This is my first project using Semantic UI. </p>
  
  <p>All best,
  Tench</p>