Hide element for mobile only - Semantic UI : <p>I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes: </p>

<ol>
<li>mobile only - will only display below 768px</li>
<li>tablet only - will only display between 768px - 991px</li>
<li>computer only - will always display 992px and above</li>
</ol>

<p>Just for example, I'm using "computer only" classes to hide image on tablets and mobile, but the result confused me. </p>

<pre><code>&lt;div class="ui grid stackable"&gt;
  &lt;div class="row middle aligned"&gt;
    &lt;div class="nine wide column"&gt;
      &lt;h1 class="ui header blue"&gt;Default Header.&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="seven wide computer only column"&gt;
      &lt;img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/3xkrx/318/" rel="noreferrer">http://jsfiddle.net/3xkrx/318/</a></p>
