Как можно настроить действие так, чтобы оно выполнялось только в блоке с кнопками и изменялось с помощью JavaScript в зависимости от размера экрана?

Для реализации описанной вами функциональности можно использовать JavaScript и CSS Media Queries. Вам нужно будет настроить обработчики событий для кнопок и заголовков в зависимости от ширины экрана. Вот шаги, которые вам нужно выполнить:

1. **HTML-разметка**: Создайте блок с кнопками и заголовками.

```html
<div id="button-container">
    <button id="toggle-button">Переключить</button>
    <h2 class="header">Заголовок 1</h2>
    <h2 class="header">Заголовок 2</h2>
    <h2 class="header">Заголовок 3</h2>
</div>
<div id="content">
    <p>Это контент, который будет изменяться.</p>
</div>
```

2. **CSS**: Настройте стили для различных экранов (опционально).

```css
@media (max-width: 768px) {
    #toggle-button {
        display: block;
    }
    .header {
        display: none;
    }
}

@media (min-width: 769px) {
    #toggle-button {
        display: none;
    }
    .header {
        cursor: pointer; /* Для указания, что заголовки кликабельны */
    }
}
```

3. **JavaScript**: Напишите скрипт, который будет обрабатывать события клика в зависимости от размера экрана.

```javascript
document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.getElementById('toggle-button');
    const headers = document.querySelectorAll('.header');
    const content = document.getElementById('content');

    const updateContent = (text) => {
        content.innerHTML = `<p>${text}</p>`;
    };

    // Функция-обработчик для кнопки и заголовков
    const handleClick = (text) => {
        updateContent(text);
    };

    // Добавляем обработчик для кнопки
    toggleButton.addEventListener('click', () => {
        handleClick('Контент изменен с помощью кнопки!');
    });

    // Добавляем обработчики для заголовков, если ширина > 768px
    headers.forEach(header => {
        header.addEventListener('click', () => {
            handleClick(`Вы выбрали ${header.textContent}`);
        });
    });

    // Функция для проверки ширины экрана и установки нужного поведения
    const setEventListeners = () => {
        if (window.innerWidth <= 768) {
            // На маленьких экранах - используем кнопки
            headers.forEach(header => {
                header.removeEventListener('click', () => {
                    handleClick(`Вы выбрали ${header.textContent}`);
                });
            });
        } else {
            // На больших экранах - используем заголовки
            headers.forEach(header => {
                header.addEventListener('click', () => {
                    handleClick(`Вы выбрали ${header.textContent}`);
                });
            });
        }
    };

    // Проверка при загрузке страницы
    setEventListeners();

    // Обновляем listener при изменении размера окна
    window.addEventListener('resize', setEventListeners);
});
```

### Объяснение кода:

- **HTML**: Создается контейнер с кнопкой и заголовками, а также блок с контентом.
- **CSS**: Используются медиазапросы для управления отображением кнопки и заголовков в зависимости от ширины экрана.
- **JavaScript**: 
  - При загрузке страницы добавляются обработчики клика для кнопки и заголовков в зависимости от размера экрана.
  - Функция `setEventListeners()` позволяет добавлять и удалять обработчики событий в зависимости от текущей ширины окна.
  - При каждом изменении размера окна вызывается `setEventListeners()`, чтобы обновить поведение.

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