Text um Bilder fliessen assen

Das Vorbild ist mit einer Flexbox umgesetzt. Man benötigt hierbei eine übergeordnete Box, welche man als Flexbox definieren kann, z.B.:

<div class="zahn-info">
    <h3>Überschrift</h3>
    <div class="text">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </div>
    <img src="gebiss.png" alt="Gebiss">
</div>

div.zahn-info {
    display: flex;
    flex-flow: row wrap;
}

Die Überschrift erhält eine Breite von 100%:

div.zahn-info h3 {
    width: 100%;
}

... der Text-Container eine Breite von zwei Drittel:

div.zahn-info div.text {
    width: 67%;
}

... und das Bild (bzw. der Bild-Container) von einem Drittel:

div.zahn-info img {
    width: 33%;
}

Soll das Bild vor den Text rücken, kann mittels order die Reihenfolge geändert werden (beginnend mit 0):

div.zahn-info div.text {
    width: 67%;
    order: 1;
}

div.zahn-info img {
    width: 33%;
    order: 0;
}

Auf herkömmliche Weise lassen sich Bilder auch mit float:left und float:right umfließen, hierbei müssen die Bilder aber vor dem Text im HTML-Code stehen. Dafür braucht es dann keine übergeordnete Flexbox

Mein Problem ist, dass ich zusätzlich unter jedem Bild die Quelle angeben muss.

Ja, dann würde ich Bild und Bildunterschrift in einem Container unterbringen, und diesen dann floaten

<div class="zahn-info">
    <h3>Überschrift</h3>
    <div class="text">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </div>
    <div class="bild">
         <img src="gebiss.png" alt="Gebiss">
        <p>Bildunterschrift</p>
    </div>
</div>

div.zahn-info div.bild {
    width: 33%;
}

ich muss also zwei div class anlegen - Einmal für Bilder links vor dem Text und einmal für Bilder rechts?

Ich würde für den ersten Fall einfach eine zweite Klasse hinzufügen:

<div class="zahn-info bild-links">

... und bei Vorhandensein die Reihenfolge ändern:

div.zahn-info.bild-links div.text {
    order: 1;
}
div.zahn-info.bild-links div.bild {
    order: 0;
}