by using the common mobile-first approach you can simplify things:

here's the pen

/* defaults to full width */
.mobile {
  width: 100%;
}

/* changes when certain dimensions is passed - note how we changed this from "max-with" to "min-width" */
@media screen and (min-width: 576px) {
  .mobile {
    width: auto;
  }
}