Как скрыть элемент при изменении размеров экрана с помощью медиа запросов?

Question

[Vitalik_chsv]

<div class="row row-1">
  	<img src="img/Welcom1.png">
        </div>
 <div class="row row-11">
  	<img src="img/Welcome11.png">
        </div>

.row-1 {
	margin-top: 1rem;
}

@media  (max-width: 768px) {
	.row-1 {
		display: none;
	}
}

@media  (min-width: 769px) {
	.row-11 {
		display: none;
	}
}

Хочу при определённой широте экрана скрыть один элемент, а другой оставить видимым. И наоборот.
Но по какой-то причине скрыт только один элемент (row-11), а другой (row-1) всегда видимый. Подскажите, что не так

Answer 1

[Сергей delphinpro]

да все правильно
https://codepen.io/delphinpro/pen/KKJqNoJ

Answer 2

[Ankhena]

Если вы меняете картинку, то используйте специально для этого придуманный тег picture