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;

}
.content2 { 
    width: 100%; 

position:relative;
padding-bottom:7%;

}

}

grazie di avermi dato l'input!

grazie glorialchemica...in effetti sto ancora imparando e non avevo fatto caso a questo "piccolo" dettaglio...ora provo...grazie mille!

Salve a tutti ho due div affiancati che contengono due iframe dentro un altro div che li contiene...ma in mobile si restringono al 49% invece io vorrei che il secondo iframe slittasse sotto al primo...come posso fare? vi posto il codice...

<div class="iframe-container">
<div style="width: 49%; display: inline-block; vertical-align: top;">iframe</div>
<div style="width: 49%; display: inline-block;vertical-align: top;">iframe</div>
</div>

.iframe-container {

width: 100%; 
height: 0; 
padding-bottom: 35.25%; /* 16:9 */
position: relative;

}

iframe {

width: 49%; 
height: 100%; 
position: absolute; 
top: 0;

}