KononovD

ну, либо в первой строке будут лежать 2 статьи, либо у 2й статьи всегда будет отрицательный маргин топ, либо все статьи будут лежать в одной, большой строке и колонке, вместе с сайдбаром

Позиционировать элементы через флоат - костыль и вынужденная мера (тогда флексов небыло/плохая поддержка браузерами). пример использования флоатов правильно - картинка, которую обтекает текст, для этого они нужны.

насчет флекс и грид - они очень легко могут жить вместе ( курим это : https://www.youtube.com/watch?v=s6RCsjcQADc&t=2786s )

если верстаете на бутстрапе - то все секции верстайте бутстрапом, а все, что внутри колонок - можете чем-угодно(флекс/грид)

опять же, смотрим видос, что я скинул - там вам все расскажут)

А что там делать-то?

макет должен быть расчерчен дизайнером, если нет - нарисуйте линии бутстрапа в фотошопе сами, погуглите как.

а вообще..
берем, открываем container, row, col-lg-3 и col-lg-9 (или какие там размеры колонок, наугад писал)
в col-lg-3 запихиваем блоки, что слева, очевидно, а в col-lg-9 запихиваем заголовок, картинку и текст.. все до безумия просто)

а куда деть левую колонку на телефонах - уже сами думайте)

p.s. всем картинкам у себя в проекте поставьте max-width: 100%; max-height:auto display:block;

Зум происходит из-за того, что картинка плохо подходит по размеру, очевидно)
Т.е. она растягивается по высоте, а сам браузер тянет ее и по ширине так, что бы сохранялись изначальные пропорции

вообще,

background: url("pass/to/img") no-repeat center / cover;

должен сделать приемлемую картинку)