title: How to hide/remove a class based on Bootstrap media query breakpoints?
body: <p>Is it possible to show/hide a class based on the screen size of the device?
  I am using bootstrap default media query. I have this default setup:</p>
  
  <pre><code>/* Bootstrap Media Query Breakpoints
  
  /* Custom, iPhone Retina */ 
  @media only screen and (min-width : 320px) {...}
  
  /* Extra Small Devices, Phones equivalent to class xs */ 
  @media only screen and (min-width : 480px) {...}
  
  /* Small Devices, Tablets equivalent to class sm */
  @media only screen and (min-width : 768px) {...}
  
  /* Medium Devices, Desktops equivalent to class md */
  @media only screen and (min-width : 992px) {...}
  
  /* Large Devices, Wide Screens equivalent to class lg */
  @media only screen and (min-width : 1200px) {...}
  </code></pre>
  
  <p>I have a div that like this:</p>
  
  <pre><code>&lt;div class="col-xs-12 ol-sm-6 col-md-6"&gt;
  
    &lt;div class="pull-right"&gt;
  
      &lt;ul class="header_links"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Member&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Login&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Member Registration&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Help&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Cart: 0&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="social_media_links"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;i class="fa fa-facebook-square"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/li&gt;
         &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;i class="fa fa-tumblr-square"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want is if the media query is in the <strong>col-xs-#</strong> the class <strong>pull-right</strong> will be hidden or removed.
  Is it possible in bootstrap?</p>