Адаптивность — как мне расположить блоки как нужно (см. схему)?

Question

[Андрей Федоров]

При просмотре на устройствах с небольшим вьюпортом по горизонтали нужно поменять положение блоков как на схеме справа.Для экспериментов

Answer 1

[Денис Инешин]

Для старых браузерах на флоатах: jsfiddle.net/6L5mea3z
Для новых на frontender.info/a-guide-to-flexbox c row-reverse

Comments

[Андрей Федоров]

Первое - не работает, не понятно что вы хотели этим сказать. Второе - не ответ.

[Денис Инешин]

Андрей Федоров: первое это пример, как изначально расположить блоки в обратном порядке, а дальше уже на медиа кверях отменяем флоат и всё выстраивается сверху вниз

[Денис Инешин]

Андрей Федоров: jsfiddle.net/6L5mea3z/1 вот добавил медиа квери, чтобы было понятней

[Андрей Федоров]

Сработает. Только менять html нельзя. Только css.

[Денис Инешин]

Андрей Федоров: так я и не трогаю html

[Андрей Федоров]

Не сработает. С двумя блоками - да, а вот когда они разной (неизвестной) высоты + футер - все разъезжается.

Answer 2

[Виталий Инчин ☢]

Изначально - 2 плавающих блока?

@media all and (max-width:500px){
  /*Тут убираем у обоих блоков float и ставим ширину 100%*/
}

Comments

[Андрей Федоров]

Это понятно. Только какие стили, вот в чем вопрос.

[Андрей Федоров]

В первом попавшемся примере все наоборот. Мне нужно чтобы серый блок вниз уходил, а не синий.

[Виталий Инчин ☢]

Андрей Федоров: htmlbook.ru/layout/fiksirovannaya-shirina-navigats...
А при уменьшении экрана - сбрасываете float и растягиваете оба блока на 100%

[Виталий Инчин ☢]

Андрей Федоров: вниз уходит тот, что ниже в коде.

[Андрей Федоров]

Другие варианты есть? Используя только css

[Виталий Инчин ☢]

Андрей Федоров: да вы принцип поймите, а не переносите весь код к себе. Это макет, а любой макет можно изменить под себя.
2 вариант - flex-box, но вам на эту тему уже написали.

[Андрей Федоров]

Я и не переношу... Просто не хотел править свой html, тот что уже написал. Ладно, спасибо.