How can I collapse the *sidebar first* region when the browser width is less than 900 pixels wide?
A media query, just like the one you list, is indeed the proper way to do this.


Obviously you would first need to adjust the width from 480 to 900, but also, you may want to choose "max-width", instead of "max-device-width", as the former will work in a small browser window on a large screen as well. That's really up to you though.
You say that you want to collapse the sidebar, which means you may also want to "display: none;", instead of "float: none;".
Strictly speaking, the "screen and", is not necessary. If you want the rule to apply to all media types, such as print and handheld, you can just omit it.


Example 1, unfloat the sidebar, only on screen media:

@media screen and (max-width: 900px) {
  .sidebar-first {
    float: none;
  }
}


Example 2, hide the sidebar, all media:

@media (max-width: 900px) {
  .sidebar-first {
    display: none;
  }
}