Boxen bedingt verschieben

Hallo zusammen,

ich möchte gerne meine Fotos auf der linken Seite (60%) anordnern und einen Text auf der rechten Seite (40%). Das bekomme ich hin.
Im Sylesheet:

div.div60h {
    width : 60%;
    float:left;
    margin-bottom:4em;
    margin-right:5%;
    min-width:4cm
}
div.div60h img {
    width: 100%;
    height: 100%;
}


div.div40 {
    width : 35%;
    float:right;
    margin-bottom:4em;
    min-width:3cm
}

und auf der Seite:

<div class ="div60h">
<a href="http://www...jpg" ><img class="alignleft" src="http://www...jpg" </a>
</div>
<div class ="div40">
<p>Die Fotografie ist schön!  </p>
</div>

Wenn ich nun aber auf einem Handy schaue oder mein Browserfenser "kleiner mache" möchte ich, dass die Schrift unter das Foto "wandert", sobald der Text länger als die Höhe der Fotografie ist. Text und Foto sollen dann 100% in der Breite haben. Wie bekomme ich das hin?

Danke für Eure Unterstützung und
einen schönen Sonntag

Danke für die Info! Das werde ich mir nochmal näher anschauen.
Ich habe es jetzt mit JavaScript gelöst.