сделать два разных аккордиона под телефон и мобилку и скрывать их по условию ширины?
или можно сделать один аккордион и перестраивать блоки? если да, то как лучше это реализовать?
Один, конечно.
grid и display:contents (при необходимости) вам в помощь.
Шепотом: Паша рановато стал считать себя дизайнером. Может быть предложить Паше ещё подумать над дизайном? И заодно спросить как он это видит на вьюпортах разной ширины.
Как верстать? Ну как хотите: гриды, абсолюты, хоть отрицательные margin.
Тут нужно конкретизировать вопрос, что именно делаете и что не получается.
1. Это не тег
2. Он работает правильно, именно так, как и задумано. Фиксируется относительно вьюпорта в том месте, куда указывают координаты.
Начать, наверное, нужно с самого начала: зачем вам фиксированное позиционирование для .page? Чего вы хотели добиться?
Может это было sticky для хедера?
Имеет смысл узнать дальнейшую судьбу верстки.
Если эти тексты будут браться из "словаря", то, может разумнее сразу использовать json или типа того.
Да и самому удобнее, если вдруг нужно править разметку, делать это только один раз.
Один, конечно.
grid и display:contents (при необходимости) вам в помощь.