Ankhena

Суть такая: https://jsfiddle.net/hv43ncm9/

Ну или так https://jsfiddle.net/bykexvn1/

Один родитель, 3 ребенка.
У ребенка внутри картинка и текст.
C помощью nth-child и order менять расположение картинки.

var sss= document.querySelector(".block");
if (sss!== null) {
ваш код
}

У вас стоит background-size: cover.
Нужно изменить на то, что вам нужно. Вероятно в px или % или вообще без указания bg size

Прокатит ли позиционирование абсолютом с процентами?

Прокатит.
Только от середины считайте.

Вариантов полно разных
Можно считать nth-child и ставить/убирать отступы https://codepen.io/anon/pen/KLMxyO (calc у меня там в развернутом виде, нужно сократить).
Можно имитировать отступы с помощью border или box-shadow.
Можно использовать padding вместо margin и, возможно, доп обертку внутри итемов.
Можно сделать доп контейнер и задать отрицательный margin для компенсации "выпирающих" margin у итемов.
Можно приплести js.

Вам нужно:
(наверное)

background-position: center bottom; 
background-size: cover;

И плюс отрезать от самой картинки лишние верхние и нижние поля либо компенсировать их через bg position. Но поскольку вы хотите адаптив, то проще отрезать, чем считать проценты.

Еще, опять таки, потому что вы хотите адаптив, нужно сделать несколько картинок и менять их через @media, чтобы не грузить на мобилках 4к картинку.

Для таких случаев добавляют еще несколько (сколько зависит от того сколько элементов может не хватать до целой строки) пустых элементов с нулевой высотой.
Если таких элементов нужно добавить всего 1 или 2, как в вашем случае, то можно обойтись псевдоэлементами.

https://jsfiddle.net/mdeoxjb6/

Потому что в шапке флоаты без clearfix.
Для наглядности: https://jsfiddle.net/w865Lm09/ видите блок со ссылками выпирает? Вот он и мешает. Всего на 1px, а какой эффект.

Такие вещи делают флексами:
https://jsfiddle.net/n178eh32/

На чистом CSS, без JS https://jsfiddle.net/b31Lr7fk/
Вместо цветов поставьте свои картинки.

https://codepen.io/anon/pen/XwWpPY

В процентах относительно общей обертки. Без js.

Например, для p display:flex
Или float для before если нужно обтекание
Или абсолют для before,а для p padding
Или еще что-нибудь

Это было сделано для другого вопроса, но вам аналогично, только без hover

или

https://jsfiddle.net/e14x0pvy/
Либо SVG

.d1 {
  background: linear-gradient(to left top, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));
}

.d2 {
  border-bottom: 1px solid red;
  transform: rotate(-30deg);
}

.d3 {
  border-bottom: 1px solid red;
  transform: skew(0, -30deg);
}

Блок с картинкой переложить в блок с текстом и задать float left.
Основному блоку флекс по вертикали.
Блоку с текстом flex 1
https://jsfiddle.net/wLot3gn0/

position: absolute
left: calc(50% - ПоловинаШириныМакета);

Возможно, еще плюс левый отступ, смотря как вы это верстаете.

Если макет один, только для десктопа, то в точках слома.
Если 3, то когда как. Если проект бюджетный, то как макеты нарисованы, такие и точки. Если не бюджетный, то снова в точках слома.

Логично. Файл называется battle.mp4, а воспроизводить на сайте пытаетесь battle.MP4
Винде все равно на регистр, поэтому на локалке работает.