Voorwaardelijke opmaak iPhone

Ik zou graag het offerte formulier op mijn website http://www.boo-yah.be/offerte/ voorwaardelijke stylen. Nu zijn het twee kolommen, maar ik zou graag hebben dat op een iPhone de kolommen onder elkaar komen te staan en de hele breedte van het scherm innemen. Zo heb ik het op dit moment gedaan:

<div class=”linker_kolom”>
<p>Uw naam [text* your-name class:formulier_rechts]</p>
<p>BTW nummer [text your-vatnumber class:formulier_rechts]</p>
<p>E-mailadres [email* your-email class:formulier_rechts]</p>
<p>Tel/GSM [text* your-phone class:formulier_rechts]</p>
</div>

<div class=”rechter_kolom”>
<p>Bedrijf [text your-company class:formulier_rechts]</p>
<p>Adres [text* your-address class:formulier_rechts] </p>
<p>Postcode [text* your-postcode class:formulier_rechts] </p>
<p>Stad [text* your-city class:formulier_rechts] </p>
</div>

En mijn CSS:

.linker_kolom {
width:45%;
display:inline-block;
}
.rechter_kolom {
width:45%;
display:inline-block
}
.wpcf-text {
width:100%;
}
.formulier_rechts {
width:100%;
}

Nu heb in geprobeerd om de volgende CSS opmaak in te geven:

@media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
.rechter_kolom .linker_kolom {
display:block;
}
}

Maar dit schijnt niet te lukken. En als ik er verder over nadenk, zouden dan mijn invulvelden ook niet meer in de juiste volgorde komen te staan. Iemand enig idee hoe ik dit voor mekaar krijg?