Hide element for mobile only - Semantic UI

Question

I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes:

1. mobile only - will only display below 768px
2. tablet only - will only display between 768px - 991px
3. computer only - will always display 992px and above

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

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

http://jsfiddle.net/3xkrx/318/

Answer 1

Also, I found one more solution. May be for someone it will helpful.

I've added classes "mobile hidden" to column which I wanted to hide on mobile devices.

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