Responsive with Stylus

1.css

#thing1 {
  display: inherit;
  background-color: #f00;
}
@media (max-width: 767px) {
  #thing1 {
    display: none !important;
  }
}
#thing2 {
  display: none;
  background-color: #00f;
}
@media (min-width: 768px) and (max-width: 979px) {
  #thing2 {
    display: inherit !important;
  }
}

1.styl

// Device media queries
tablet = "(min-width: 768px) and (max-width: 979px)"
phone = "(max-width: 767px)"

// Useful mixins
hideOn(device)
  display: inherit // bug in stylus, we need a core rule
  @media device
    display: none !important

showOn(device)
  display: none
  @media device
    display: inherit !important

#thing1
  hideOn('phone')
  background-color: red

#thing2
  showOn('tablet')
  background-color: blue