title: Hide content for small and extra small screen size devices
body: <p>I need to hide some <code>HTML</code> contents from the screen when the devices are changing. That mean I am trying to create a responsive design. In small screen sizes (below 768px) I want to hide some contents. </p>
  
  <p>My contents something like this - </p>
  
  <pre><code>&lt;div class="content-to-hide"&gt;
     &lt;div class="container"&gt;
          &lt;a class="banner-brand visible-sm visible-md visible-lg" href="index.html"&gt;
             &lt;img src=""  alt="" width="280"&gt;
          &lt;/a&gt;
          &lt;div class="utility-nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"  id="example" data-toggle="tooltip" data-placement="left" title=""&gt;&lt;i class="icon fa fa-users fa-lg"&gt;&lt;/i&gt;&lt;br /&gt;&lt;span&gt;xxxxxxxxxxxxxx&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="View Cart"&gt;&lt;i class="icon fa fa-unlock-alt fa-lg"&gt;&lt;/i&gt;&lt;br /&gt;&lt;span&gt;Sign in&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
               &lt;h2&gt;&lt;i class="icon fa fa-phone-square"&gt;&lt;/i&gt; &lt;span&gt;Hot Line&lt;/span&gt;xxx-xxx-xx-xx&lt;/h2&gt;
           &lt;/div&gt;&lt;!-- /.utility-nav --&gt;
  
      &lt;/div&gt;&lt;!-- /.container --&gt;
      &lt;div class="hr"&gt;&lt;hr /&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So I want to hide this contents from small and extra small size screen devises. </p>
  
  <p>I tried it using <code>LESSCSS</code> but no luck</p>
  
  <pre><code>@media (max-width: (@grid-float-breakpoint - 1)) {                  
     .content-to-hide {
        display: none;
     }
  }
  </code></pre>
  
  <p>Hope someone will help my out. </p>
  
  <p>Thank You. </p>