iBird Rose

Пробовал сделать подобное с использованием flexbox

И? что именно не получилось?

что там сложного то? там просто картинка и блоки. использованы 2 плагина:
https://daneden.github.io/animate.css/
https://wowjs.uk/

попробуй так https://codepen.io/anon/pen/mgQyyP

Отрицательные margin для этого случая ничем не плохи:

обнулить стандартные стили маркеров и через before воткнуть fontawesome иконку. Она по дефолту как раз через псевдоэлемент и вставляется

Не прижатый: https://jsfiddle.net/mke0wfgv/


Прижатый: https://jsfiddle.net/mke0wfgv/1/

идея Артем Будин хорошая.
к примеру берешь kenwheeler.github.io/slick и там есть объединение двух слайдеров.
ищи заголовок в документации "Slider Syncing"

есть много библиотек для этого. бери любую. к примеру вот: printjs.crabbly.com

ну как бы первый вариант и правльный.
отступы у бутстрапа по краям как раз и компенсируются через отрицательные margin у .row

накидал. есть пару косяков. дальше сам давай:
https://jsfiddle.net/n6of70wk/

убери у .modal-content стиль pointer-events: auto;

ставь эммет и там есть подобное через (Shift+Ctrl+')
ну и можешь назначить на это свои кнопки

для этого в бэм есть https://ru.bem.info/methodology/block-modification...

т.е. в твоем случае должно получиться что-то вроде:
.news-list.in-main
.news-list.in-news-page
.news-list.in-modal
и стилизуешь каждый соотвественно

Сделай обертку внутри и задай ей: width: max-content;
https://codepen.io/anon/pen/NzwKXQ