Как-то сумбурно изложено, и непонятно, что не работает.
Давайте возьмем конкретный пример и на нем разберемся.
Вот это работает: https://jsfiddle.net/pr4k16cg/
Ваш ход.
Раз уж используете rem , используйте их и в медиазпросах.
Чтобы почувствовать разницу, выставьте в браузере большой размер шрифта и просмотрите страницу.
Вся "переделка" будет заключаться в вычислении координат кнопки и изменении позиции и размеров модалки в его же событии bs.modal.show
Для удобства часть стилей можно переписать в css через дополнительный класс к modal-dialog
На реальных сайтах различные блоки часто перемещаются, меняются местами, удаляются, добавляются новые.
Если ваша верстка выдерживает подобные манипуляции без вмешательства в написанные стили, значит вы все сделали правильно.
Храните корзину в localStorage — она не потеряется.
Синхронизируйте стейт по каждому изменению с небольшим дебаунсом, 0,5-1с. Не страшно, бэкэнд не упадет.