Как показать элемент только на мобильных или только на компьютере

Короткий ответ

Спрячьте элемент по умолчанию и покажите в медиазапросе для узких экранов. Измените ширину окна:

<style>
  .mobile-only { display: none; }
  @media (max-width: 600px) {
    .mobile-only { display: block; }
    .desktop-only { display: none; }
  }
</style>
 
<p class="mobile-only">📱 You are on a narrow screen</p>
<p class="desktop-only">🖥 You are on a wide screen</p>

По способу ввода, а не по ширине

Узкое окно бывает и на компьютере, а широкий экран — у планшета. Если важно, есть ли мышь, проверяйте это напрямую:

<style>
  .touch-hint { display: none; }
  @media (hover: none) and (pointer: coarse) { .touch-hint { display: block; } }
</style>
 
<p class="touch-hint">Swipe left to see more</p>
<p>The hint above is shown only on touch screens.</p>

Ширина контейнера

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

Частая ошибка

Одно и то же содержимое пишут дважды — версию для телефона и для компьютера — и прячут лишнюю. Страница становится тяжелее, поисковики видят дубли, а при правке текст легко обновить только в одной копии. Старайтесь перестраивать один и тот же блок CSS-раскладкой, а прятать только действительно разные элементы, например кнопку меню.