Я думаю, что у меня есть решение моего собственного вопроса.
Это работает для меня, потому что причина, по которой я хочу, чтобы изображение появлялось после текста в источнике, заключается в том, что на маленьком экране я не плаваюэто и я хочу, чтобы содержание было над изображением.Если бы изображение было первым, то оно было бы слишком маленьким.
Мое решение не очень семантическое, но кроме этого я не вижу проблемы - возможно, еще один запрос http, так что , пожалуйста, дайте мне знать, если кто-нибудь может увидеть проблему с этим.
Вот как я это сделал:
Добавьте изображение дважды.Сначала перед текстом.Убедитесь, что «alt» пуст.
Затем добавьте изображение снова после содержимого.Убедитесь, что альтернативный текст является подходящим.
Оберните изображения и текст в элемент div и установите для него значение «display: относительный»
Установите первое изображение, чтобы оно плавало вправо, а его видимость скрытоУстановите 2-е изображение в положение: абсолютное и поместите его поверх изображения (легко с отображением относительно контейнера)
Плавающее изображение действует как поплавок для абсолютно позиционированного изображения, и нам не нужно использоватьJS для обработки любых измерений, поэтому при использовании максимальной ширины изображение будет уменьшаться, а текст будет продолжать работать как следует (без каких-либо обратных вызовов JS для получения новых измерений)
Затем с помощью медиазапросадля маленького экрана я установил первое изображение как «display: none» и не применил абсолютную позицию ко второму изображению.Итак, что касается пользователей, они видят контент, за которым следует изображение.
Кажется, хорошо работает в моих начальных тестах, но похоже на хак.Возможно, я мог бы сделать что-то с flex-box, но я оставлю это в другой раз.Если кто-то знает лучшее решение или может придумать причину, почему это действительно плохо, пожалуйста, дайте мне знать!