Тег изображения html5 не работает с Bootstrap ⇐ Html

[Anonymous]

Я пытаюсь установить разные изображения с помощью тега html5
. Я установил 2 изображения внутри сетки начальной загрузки, поэтому изображение реагирует до точки останова 768 пикселей, где изображение меняется.

Когда я минимизирую размер экрана браузера, я вижу, что изображение не реагирует. Как такое может быть? Код начальной загрузки должен быть правильным?

Демо-версию можно увидеть здесь.

HTML-код во фрагменте кода выглядит не очень хорошо. Поэтому размещаю это здесь:

Код: Выделить всё

[img]http://vouzalis.dk/1024.jpg[/img]


Here is headline 1

Код: Выделить всё

body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}

.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}

.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}

.bottom-left {
position: absolute;

bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}

/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive { /*EDIT*/
width: 100%;
height: auto;
}
.btn-success {
width: fit-content;
}
/* Here you go */
.height-m {
height: 350px;
}

}

@media (max-width: 991px) {
h3 {
font-size: 1.2em;

}
}

Код: Выделить всё

[img]http://vouzalis.dk/1024.jpg[/img]


Here is headline 1

Подробнее здесь: https://stackoverflow.com/questions/516 ... -bootstrap