title: Display text on large screen and icon on small screen
body: <p>I have a menu like</p>
  
  <pre><code>&lt;ul id='menu'&gt;
              &lt;li id='home' &gt;&lt;a href='index.php'&gt;&lt;span class='menu_text'&gt;Home&lt;/span&gt;&lt;img class='menu_icon' src='_images/icons.svg#svg_home' alt=''/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id='other'&gt;&lt;a href='other.php'&gt;&lt;span class='menu_text'&gt;others&lt;/span&gt;&lt;img class='menu_icon' src='_images/icons.svg#others' alt=''/&gt;&lt;/a&gt;&lt;/li&gt;
              ...
              &lt;/ul&gt;
  </code></pre>
  
  <p>Now I want to display text with class <code>menu_text</code> when the screen size is large i.e on laptops and <code>menu_icon</code> should remain hidden and the reverse when screen size is small i.e on tablets or mobile devices how can I achive it using css ?</p>