How to wrap components in a tag when the screen is zoomed out?

Question

JavaScript

Good afternoon!

Please tell me how to make it so that when the screen is reduced (max-width: 768px), the FiltersUser components wrap another piece of code, Accordion .

<div className="external-container__filters">
      <FiltersUser setValue={setTeachers} nameuser="teacher" titlefilter="Преподаватели"/>
      <FiltersUser setValue={setStudents} nameuser="student" titlefilter="Студенты"/>
      <FiltersStatus setValue={setStatus} titlefilter="Статусы"/>
 </div>

<div className="external-container__filters">
      <Accordion className="external-container__filters--phone">
          <Accordion.Item eventKey="0">
            <Accordion.Header>
              <img src={filterImg} alt="Фильтры" className="filters__img" />
              <div className="text-m">Фильтры (3)</div>
            </Accordion.Header>
            <Accordion.Body>
              // ВСТАВИТЬ СЮДА
            </Accordion.Body>
          </Accordion.Item>
        </Accordion>
      </div>