Чтобы текст отображался под изображением в уменьшенном "мобильном" представлении

У меня есть сайт, который отлично работает в режиме настольного компьютера, но когда я уменьшаю страницу, шрифт остается над картинкой, из-за чего я не вижу ни картинки, ни слов. Как мне настроить html или css (или и то и другое?), чтобы шрифт опускался ниже картинки, когда сайт просматривается на маленьком устройстве?

Вот мой html и css код:

Вот CSS:

@media (max-width: 800px) {
    .myclass {
        font-size: 20px;
    }
}