Прошу помочь разобраться с кодом

[Meinlcymbols]

Имеется следующий блок, однако при уменьшении размеров содержащиеся блоки не заходят дрг под друга колонкой, как быть?

Использовал такую технику - не помогло:

HTML:

<div id = "wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>

<p>Sample paragraph</p>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

#wrapper > div {
    width: calc(100% / 3);
    float: left;
    height: 200px;
}

#wrapper > div:first-of-type {
    background-color: rgba(255, 0, 0, 0.5);
}

#wrapper > div:nth-of-type(2) {
    background-color: rgba(0, 255, 0, 0.5);
}

#wrapper > div:nth-of-type(3) {
    background-color: rgba(0, 0, 255, 0.5);
}

@media screen and (max-width: 500px) {
    #wrapper > div {
        float: none;
        width: auto;
    }
}

Спасибо за внимание!

[Ale}{ander]

Как я понял надо, чтобы при уменьшении ширины окна дивы накладывались друг на друга.

Попробуй сделать у #wrapper position: fixed, а дивам дай position: absolute; Тогда они будут скрываться друг под друга.

[deduschka]

Добавьте в #wrapper свойство x-index, в порядке убывания