Скажу банальную вещь: сайт должен хорошо выглядеть на любой ширине вьюпорта.
Поэтому, использовать те брейкпоинты, которые лучше всего для этого подходят.
А ещё, можно весь сайт сделать в vw и clamp, тогда вообще можно обойтись без media.
Так что ваш вопрос без конкретики не имеет смысла.
сделать два разных аккордиона под телефон и мобилку и скрывать их по условию ширины?
или можно сделать один аккордион и перестраивать блоки? если да, то как лучше это реализовать?
Один, конечно.
grid и display:contents (при необходимости) вам в помощь.
