Да, все верно, на мобилках задайте ей fixed и выставьте значения top, left и т. п. он просто выйдет на адаптиве из общего потока вёрстки и визуально будет являться модалкой, а в dom останется на своём месте и не нужно будет дублировать разметку
Спозиционируй блок с товарами и через top прижми к блоку со стрелкой, а чтобы он имел эффект выпадения, нужно прописать скрипт, который рассчитает высоту блока с товарами, а самому блоку с товарами по дэфолту в стилях задать ovevrflow: hidden; height: 0; попробуй
Вот этот скрипт https://www.w3schools.com/howto/tryit.asp?filename...
Класс panel и будет являться блоком с товарами
Контейнер ставят в 95% случаев внутри самой секции, дабы задать какая макс или мин ширина твоего сайта будет и естественно по центру он должен находиться, как правило для контейнера использую примерно так max-width 1200px, width: 100%, margin: 0 auto, padding: 0 15px, из всего этого будет меняться только max-width, то есть какая ширина сетки на макете и padding, как правило он 10-30 дизайнеры ставят, но по стандарту 15 всегда
Там где ajax выполняется просто пихай fadeout метод первой модалке и fadeIn второй, если jquery юзаешь, если нативно достаточно класса с display block и все, если для отправки axios юзаешь засунь в .then идею которую я выше тебе описал