title: semantic-ui: how to hide element on mobile only?
body: <p>I need to hide some element, e.g. an image, only on mobile. How can I achive this with semantic-ui?</p>
  
  <p>Is there anything like "hide-xs" in angular material or "hidden-xs" in bootstrap?</p>
  
  <p>I read through the documentation and couldn´t find anything similar. All I found were <a href="https://semantic-ui.com/collections/grid.html#device-visibility" rel="nofollow noreferrer">some options for a grid</a>, but I don´t want to use a grid, just to make an element invisible on certain devices...</p>
  
  <pre><code>&lt;div class="ui grid"&gt;
    &lt;div class="two column mobile only row"&gt;
      &lt;div class="column"&gt;
        &lt;div class="ui segment"&gt;
          Mobile only
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also I found <a href="https://stackoverflow.com/questions/41683267/semantic-ui-hide-element-for-mobile-view">some solution here on SO</a>, where someone suggested to write some additional CSS. Like this:</p>
  
  <pre><code>/* 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;
    }
  }
  </code></pre>
  
  <p>Is that really the way to go? Thanks for your ideas.</p>