ok ci sono riuscito...ma ho dovuto modificare il codice creando una regola per ognuno dei div se no si sovrappongono
<div class="iframe-container">
<div class="content1">iframe</div>
<div class="content2">iframe</div>
</div>

css normale

.content1 {
width: 49%;
vertical-align: top;
float:left;
}
.content2 {
width: 49%;
vertical-align: top;
float:right;
}

css responsive

@media screen and (max-width: 768px){

.content1 {
width: 100%;
display:inline-block;
margin-bottom:209px;

position:relative;
padding-bottom:7%;

}

grazie di avermi dato l'input!