Как можно изменить положение блока только с помощью CSS?

Question

[Just Pixel]

Стоит задача при смене разрешения изменить положение блока. Вопрос закрался именно в том, как сделать это перемещение так, чтобы не пришлось изменять верстку (ну или быть может только самые незначительные изменения в HTML код). Сделать это надо без использования JS. Состояние А и Б лучше видны на схеме ниже:


Изначально доступен вариант 1, затем при изменении размеров экрана должен сформироваться вариант 2. Вариант 1 для браузеров IE8+, а вариант 2 для IE9+ (за счет того, что изменения осуществляются с помощью CSS media queries, которые в IE8 просто недоступны, поэтому там всегда 1 вариант).

Я честно весьма долго бился над вопросом, но, к сожалению, так и не смог найти пути решения. Точнее мне удавалось сместить картинку вправо, но я терял обтекание текста под картинкой.
Может быть у меня из-за кучи вариантов замылился взгляд и я не вижу чего-то очевидного. Прошу помощи у сообщества с данной проблемой. Образец верстки доступен здесь: https://jsfiddle.net/88jafhbL/

Заранее спасибо за внимание и помощь!

Обновление 3: Быть может есть какие способы без оглядки на старые браузеры? Если не сложно, не могли бы привести рабочие примеры на том же JSFiddle, например.

Comments

[Just Pixel]

Уточнение: Забыл добавить, что ширина родительского блока (для указанных на схеме трех элементов) фиксированная и нам всегда известная (например, пусть будет 400px). Высота случайная.

[Just Pixel]

Уточнение 2: и заголовок может быть очень длинный... следовательно он должен тоже обтекать фотку. а за ним уже текст... фантастика, знаю :(

[Александр Лысенко]

Just Pixel: вы рассматривали вариант с js?

[Just Pixel]

AlexanderZe: Да, с JS все достаточно просто реализуется, но задача стоит обойтись без JS. Конечно, если никаких решений не будет найдено буду использовать его...

[Артём Ведищев]

А если img {float: left;} в первом случае и img {float: right;} во втором с завязкой на media?

[Александр Лысенко]

Just Pixel: Все упирается в заголовок который должен обтекать картинку. Мне кажется это никак не реализовать. Используйте JS. Если бы не поддержка старых версий бразуера можно было бы взглянуть на flex

[Just Pixel]

AlexanderZe: А если заголовок не будет обтекать картинку, а только текст - есть какие-нибудь идеи? Желательно правда при этом, чтобы если заголовок был короткий, то текст проваливался бы под заголовок и обтекал картинку при этом. То есть короткий заголовок. Далее свободное место заполняет текст, который в свою очередь при большой длине обтекает картинку.

Answer 1

[Александр Лысенко]

С учетом того что мы обсуждали в комментах https://jsfiddle.net/0yppu7zz/

Comments

[Just Pixel]

Тогда если заголовок будет слишком длинный, то текст получит отступ слева размером с ширину заголовка (https://jsfiddle.net/0yppu7zz/1/ ). Поэтому добавил еще clear: left для текста (https://jsfiddle.net/0yppu7zz/2/ ), чтобы убрать этот отступ. Так получается дыра под картинкой с длинным заголовком. Подумаю что можно сделать еще )
Спасибо за помощь.

Пытался еще что-нибудь изобразить с FlexBox забив на IE9, но я так понимаю обтекания текстом и заголовком картинки даже таким образом не удастся получить.

[Александр Лысенко]

Just Pixel: к сожалению IE не оставляет вам никаких шансов

[Just Pixel]

AlexanderZe: А если бы без IE, есть какие-то пути решения? Ну просто хотя бы в образовательных целях. Если Вам не сложно, напишите, пожалуйста.

[Александр Лысенко]

Just Pixel: Это вам к знатокам flex, там эта задачка решается на раз-два. Я, к сожалению, пока не могу ничем помочь с этим.