Скрыть/показать элемент в зависимости от размера экрана

Когда адаптируешь шаблон сайта под мобильные устройства приходится чем-то жертвовать, ведь невозможно разместить весь контент на маленьком экране.

Вот небольшой пример как скрыть определённый элемент при разрешении экрана менее 600px

@media screen and (max-width: 600px) {
  .visiblebutton {
    display: none;
  }
}

Например этакнопка исчезнет при разрешении экрана менее 600px
И наоборот показать:

@media screen and (max-width: 600px) {
  .hiddenbutton {
    display: none;
  }
}

Туткнопка появится при разрешении экрана менее 600px