Arrangement des blocs pour que ce soit responsive

Bonjour,

Je suis en train de développer un site avec Boostrap et je coince sur le dernier bloc (peut être parce qu'il est tard...)

Vous voyez l'exemple ici : http://yesyouweb.com/hauteur/index.html

Sur mobile, je voudrais avoir l'image, en dessous le h2, puis le bloc mail et le bloc tél. Donc j'ai fait 2 colonnes (3 et 9). Dans la col-md-9, j'ai mis un titre et une row avec 2 colonnes de 6. Vous pouvez voir tout ça... Comment faire pour que le bloc violet ait la même hauteur que l'image, sur desktop et sur tablette. Merci de votre aide !!
Marine

Bonsoir !

Vraiment curieux ce truc, il y a à la fois du flexbox, des float, du display : table...

Pourquoi n'utilisez-vous pas uniquement flexbox, vous vous faciliteriez la vie...