Принцип, которым я руководствуюсь — от адаптивности страница не должна потерять узнаваемость. Человек может открывать страницу иногда на компьютере, а иногда — на телефоне. Ему должно быть понятно, как именно она перестроилась. Элементы должны идти в том же порядке, общий вид элементов должен быть очень похожим. Человек не должен даже ощутить, что у него открылась «мобильная версия»; наоборот, должно казаться, что просто вот так страница естественным образом ведёт себя, когда ей мало ширины.
С этой точки зрения есть смысл адаптировать не страницы, а их элементы: каким‑то предсказуемым способом у вас адаптируется меню, картинки, текст с примечаниями на полях, таблицы, и так далее — в зависимости от того, какие элементы у вас вообще на сайте есть.
В вашем примере нужно понять роль картинки и примечания на полях. Картинка — это фотография автора, иллюстрация к первому абзацу, иллюстрация ко всеми тексту? Примечание — это комментарий ко всему тексту или какая‑то сноска из второго абзаца? Связаны ли эта картинка и текст друг с другом? По идее эти отношения должны быть явно выражены разметкой, и исходя из них и получится вёрстка на узкой ширине.
Например, предположим, что на картинке — автор текста, а примечание относится ко второму абзацу. Тогда: