Как last-child отобразить первым? - Вопросы по CSS

Здравствуйте. Столкнулся с такой задачей: нужно отобразить сверху элемент, расположенный в коде снизу. Понимаю, звучит непонятно, я сам толком не могу это переварить. Постараюсь объяснить на примере:
Есть блок с некоторым контентом:
Нужно поднять картинку в начало контента, да так, чтобы контент ее обтекал:


Количество контента, как и размер "картинки" - всегда разные, так что взять N-ное количество первых детей и отодвинуть их от края на ширину абсолютно спозиционированной картинки не получится.
Есть какие-нибудь идеи, как такое реализовать?

float
И ширину картинки в% от общей

Здравствуйте. Столкнулся с такой задачей: нужно отобразить сверху элемент, расположенный в коде снизу. Понимаю, звучит непонятно, я сам толком не могу это переварить. Постараюсь объяснить на примере:
Есть блок с некоторым контентом:

Код

<div class="box">
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<img class="top"/>
</div>

Нужно поднять картинку в начало контента, да так, чтобы контент ее обтекал:


Количество контента, как и размер "картинки" - всегда разные, так что взять N-ное количество первых детей и отодвинуть их от края на ширину абсолютно спозиционированной картинки не получится.
Есть какие-нибудь идеи, как такое реализовать?

Нужно задать для box свойство relative, а для top свойство absolute и спокойно отпозиционировать его в правый верхний угол. Для первого элемента p создать псевдоэлемент after и закрыть им правый верхний угол через float, чтобы текст обтекал эту область с картинкой.

Еще можно использовать flex и параметр для последнего блока order: 1 (ну и для остальных задать соответствующие).
Так же можно на свойстве grid, но мне кажется там чуть сложнее.

Абсолютное позиционирование здесь не подойдет.

Нужно задать для box свойство relative, а для top свойство absolute и спокойно отпозиционировать его в правый верхний угол. Для первого элемента p создать псевдоэлемент after и закрыть им правый верхний угол через float, чтобы текст обтекал эту область с картинкой.

Чтобы сделать так, как вы пишите - нужно четко знать размеры картинки и блока, который будет закрываться через псевдо, для современных сайтов это не подходит

Абсолютное позиционирование здесь не подойдет.Чтобы сделать так, как вы пишите - нужно четко знать размеры картинки и блока, который будет закрываться через псевдо, для современных сайтов это не подходит

Картинку можно ограничить по высоте посредством object-fit, это не проблема. В идеале, тут бы конечно макет вывода поправить.

Картинку можно ограничить по высоте посредством object-fit, это не проблема. В идеале, тут бы конечно макет вывода поправить.

fit это вписывание картинки в пределы блока, у которого известна ширина\высота (аналог background-size), пока этого нет - работать не будет