How to hide/remove a class based on Bootstrap media query breakpoints?

Question

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:

/* 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) {...}

I have a div that like this:

<div class="col-xs-12 ol-sm-6 col-md-6">

  <div class="pull-right">

    <ul class="header_links">
      <li>
        <a href="#">Member</a>
      </li>
      <li>
        <a href="#">Login</a>
      </li>
      <li>
        <a href="#">Member Registration</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
      <li>
        <a href="#">Cart: 0</a>
      </li>
    </ul>

    <ul class="social_media_links">
      <li>
        <a href="#">
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
       <li>
        <a href="#">
          <i class="fa fa-tumblr-square"></i>
        </a>
      </li>
    </ul>

  </div>
  <div class="clearfix"></div>

</div>

What I want is if the media query is in the col-xs-# the class pull-right will be hidden or removed. Is it possible in bootstrap?

Answer 1

Hide or remove is not possible, but you can change the way will be rendered

@media only screen and (max-width : 480px) {
  .pull-right {
     float:none;
  }
}

So, in this way, in all media screen less then 480px, this class will not be rendered with float:right.

Answer 2

Bootstrap has built-in utility classes for hiding\showing content based on the viewport.

http://getbootstrap.com/css/#responsive-utilities

.visible-xs-* and .hidden-xs (* = block, inline-block or inline)

---

EDIT

You won't be able to override .pull-right because it uses !important, and it only applies one rule (float: right;), so its pretty easy to recreate as a custom class.

.pull-right-custom {
    float: right;
}

@media only screen and (max-width : 480px) {
    .pull-right-custom {
        float: none;
    }
}

Edit #2

If you want to keep with the mobile-first nature of bootstrap, it would look like this.. the sm would indicate it pulls right on sm or larger viewports (for semantics).

.pull-right-sm {
    float: none;
}

@media only screen and (min-width : 480px) {
    .pull-right-sm {
        float: right;
    }
}