Антон Вебсайтовский

Буду краток: jsfiddle.net/e2x8fd4L

Тут нет настродамусов, нужен полный код или jsfiddle.
Ваше окно должно быть в диве где и город, сам div в position:relative, всплывашку в absolute, можно по ховеру показывать, а можно по клику.

Зависит от того как это фото будет использоваться.
Для небольших превью, я обычно ставлю 85-90%
Для полноценных изображений, если они открываются именно по запросу пользователя - 100%
Для фонов (background-size: cover) можно использовать 90%, а если поверх него ещё модный затемнённый оверлей накладывается, то 80% и изображение поменьше сделать.
В общем - по ситуации.

Вот пример https://jsfiddle.net/2cx7oxay/
2 картинки, у второй в стайл указана ширина, у второй нет. Но есть ширина в стилях, можете ее убрать посмотреть что будет.

.newst img[style~="float:left;"] {
  margin: 10px 10px 10px 0;
}

.newst img[style~="float:right;"] {
  margin: 10px 0 10px 10px;
}

Не понимаю зачем так все усложнять? https://codepen.io/aliencash/pen/gXMRYO?editors=1100

UPD: Хорошо, давайте без flex'ов. https://codepen.io/aliencash/pen/qVNjoz?editors=1100 ))

Оптимальный способ на данный момент:
На флексах: задаете блокам нужный order при соответствующем media

По старинке:
Правый блок размещаете в коде первым. Задаете ему float:right. Левому left.

Так?
https://jsfiddle.net/tjuLjd0t/2/
см 62 строку

А что мешает поменять фоны местами?
https://jsfiddle.net/rdm10m2g/

.sky-mega-menul li.parent > a {
  background: url(http://izoluxdv.ru/media/images/arrow-down.png) right center no-repeat, #B2B2B2 url(http://izoluxdv.ru/media/images/mlfon.jpg);
}
.sky-mega-menul li.parent:hover > a {
  background: url(http://izoluxdv.ru/media/images/arrow-down.png) right center no-repeat, #F46B23;
}

.sky-mega-menul:hover {
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}

https://jsfiddle.net/3vL69tq9/

Только еще разобраться с моментом появления и стилями выпадающего блока, но суть должна быть ясна.