/* public_html/css/profile_styles.css */
.profile-form { max-width: 480px; margin: auto; }
.profile-form input, .profile-form button { width: 100%; margin-bottom: 12px; }
/* … */

/* Скрываем мобильные элементы на десктопе */
.mobile-header,
.mobile-sidebar {
  display: none;
}

/* По умолчанию показываем десктопные */
.header {
  display: flex;  /* или как у вас было */
}
.sidebar {
  display: block;
}

/* На узких экранах (<768px) наоборот */
@media (max-width: 768px) {
  /* прячем десктоп-хедер и десктоп-сайдбар */
  .header {
    display: none;
  }
  .sidebar {
    display: none;
  }

  /* показываем мобильные */
  .mobile-header {
    display: flex;     /* или inline-flex, как вам удобнее */
    align-items: center;
    justify-content: space-between;
  }
  .mobile-sidebar {
    display: block;    /* и дальше ваша логика с .show */
  }
}