¿Podemos mover esta barra lateral a una ubicación diferente según el tamaño de la pantalla?

Nos estamos enfrentando a un problema importante con una barra lateral en las páginas móviles. Nos hemos comunicado con los desarrolladores del plugin (LearnPress) que gestiona la barra lateral, pero no hemos recibido respuesta en aproximadamente una semana. He probado diferentes parámetros de visualización para varios divs, pero sin éxito.

Este problema ocurre en la página principal de un curso en línea, lo cual hace que el curso completo sea inutilizable para los usuarios móviles.

Esta es la página en cuestión: https://passpen.com/courses/life-insurance-practice-exam/

En el escritorio (ancho de 768 píxeles o más), la barra lateral se mantiene en su ubicación normal, en el lado derecho del contenido. Funciona perfectamente. 🙂 Imagen del tamaño de pantalla de escritorio: Desktop screen size image

Cuando se visualiza en una pantalla con un ancho inferior a 768 píxeles, la barra lateral se mueve hacia “cerca del final” del contenido. La captura de pantalla muestra el tamaño de pantalla móvil en Chrome a 510 píxeles. Imagen del tamaño de pantalla móvil: Mobile screen size image

Como se puede ver, la barra lateral se ha movido hacia el final del contenido y empuja el pie de página hacia abajo. Curiosamente, si se abre en un iPhone, el pie de página se mueve hacia la parte inferior del contenido y se enrolla debajo del mismo.

Resumiendo la historia, necesito que esta página y barra lateral sean utilizables para los usuarios móviles. El escenario ideal sería que la barra lateral estuviera justo debajo del título en el móvil con el resto del contenido debajo de ella, pero si tuviera que estar por encima de todo (excepto la navegación), eso también estaría bien.

Agradezco su tiempo y consejo. Muchas gracias.

edit: En el iPhone, en realidad no se está moviendo debajo del pie de página. El contenido en el recuadro blanco debajo de la imagen simplemente no se muestra en absoluto.