Ukryj element tylko na urządzenia przenośne - Interfejs semantyczny

Question

Mam problem z ukrywaniem obrazu na urządzenia mobilne. Używam struktury Semantic UI. W dokumentacji znalazłem kilka klas:

1. mobile tylko - będzie wyświetlać tylko poniżej 768px
2. tabletka tylko - będzie wyświetlać tylko między 768px - 991px
3. tylko komputer - będzie zawsze wyświetlał 992px a przede

Na przykład używam klas "tylko komputer", aby ukryć obraz na tabletach i urządzeniach mobilnych, ale wynik mnie zmieszał.

<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

Ponadto, znaleziono jeszcze rozwiązania. Może być dla kogoś, to będzie pomocne.

Dodałem klasy "mobile hidden" do kolumny, którą chciałem ukryć na urządzeniach mobilnych.

<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> 

Answer 2

Dodaj mobile only grid do img znacznik

Prawidłowe ekspresja jest poniżej

<img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title=""> 

Answer 3

wizyta tutaj działa bardzo dobrze

/* Mobile */ 

@media only screen and (max-width: 767px) { 
    [class*="mobile hidden"], 
    [class*="tablet only"]:not(.mobile), 
    [class*="computer only"]:not(.mobile), 
    [class*="large monitor only"]:not(.mobile), 
    [class*="widescreen monitor only"]:not(.mobile), 
    [class*="or lower hidden"] { 
    display: none !important; 
    } 
} 
etc... 

https://jsfiddle.net/8LkLoxcx/