Hauteur de colonnes en responsive

Bonjour,

Le sujet est récurent tant j'ai lu de pages sur le soucis.
Avoir des divs de la même taille, quel soucis.
Je n'ai pas trouve une solution a mon problème
J'ai un site que j'essaie d'avoir Web responsive, pour cela j'utilise Bootstrap. C'est vraiment tres sympa la gestion dynamique du nombre de colonne en fonction de la largeur de l'ecran. rien a redire...
Donc je bosse sur ce genre de chose :

<div class="row col-wrap">
               <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <img src="img1.png" class="img-responsive" alt="message tres tres tres long">
                    <div>
                       <h4>message tres tres tres long</h4>
                    </div>
                </div>
             <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <img src="img1.png" class="img-responsive" alt="court">
                    <div>
                       <h4>court</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <img src="img1.png" class="img-responsive" alt="message tres tres tres long">
                    <div>
                       <h4>message tres tres tres long</h4>
                    </div>
                </div>			
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <img src="img1.png" class="img-responsive" alt="court">
                    <div>
                       <h4>court</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <img src="img1.png" class="img-responsive" alt="court">
                    <div>
                       <h4>court</h4>
                    </div>
                </div>
</div>

Donc sur des écrans larges, ça marche super bien
Mais des que je suis sur un écran xs où je n'ai plus que deux colonnes, mes images se décalent car le texte vraiment trop long prend trop de place, donc l'image se place sous la div la plus petite.

Toutes les solutions css que j'ai vu ne marche pas car se basent sur la taille du div row les contenants.
Ca marche si on a une seule ligne dans ce div, mais cela ne marche plus si on passe dans un écran très petit car les divs forment plusieurs lignes (dans un même div row) !

Une idée pour ce soucis ?

D'avance merci !
Et bravo pour ce site car il m'a aide de nombreuses fois !
Lutine
Modifié par Lutine (07 May 2015 - 11:41)

Bonjour,

Upload ton code HTML et CSS sur un site du genre Codepen, on pourra mieux résoudre ton soucis