Egor Varenik

Стандартными точками смены стиля являются 1200px + (крупные мониторы), 992px (мелкие ноутбуки, планшеты в горизонтальном варианте), 768px (вертикальное положение планшета) и 576px (телефон в горизонтальном виде). Все, что меньше 576px прописывается для телефонов с вертикальной ориентацией экрана. Если стоит вопрос создания макета — имхо, стоит сделать ещё на 320px (ширина iphone 5/se, самое узкое из массовых устройств)

https://css-tricks.com/styling-cross-browser-compa...

Дело в этом участке кода:

var src = $(this).attr('src'),
size = src.split('/').reverse(),
h = parseInt(size[1]),
w = parseInt(size[2]),

Размер изображения скриптом определяется по ссылке, а у dummyimages ссылки другого типа (placeimg.com/600/400/animals против dummyimage.com/600x1200/000/fff), поэтому твой скрипт не может нормально определить их высоты и ширину => flex-basis и flex-grow

Через position: absolute и z-index (меньший у нижнего блока, больший у верхнего)

Html — да, возможно. Css — я бы сказал, что однозначно нет. Считаю, что чтобы изучить какую-то технологию, нужно поработать с ней сначала в чистом виде (хоть сложные одностраничник на html+css чистых делать), а потом уже, как советовал Антон Литвиненко разбирать исходники bootstrap, чтобы понять, как там все устроено под капотом.