De antwoorden worden steeds vreemder. "Kan alleen met jQuery omdat het realtime responsive moet zijn"? Leg die eens uit.

Wat misschien ook een oplossing kan zijn is Masonry, daarmee krijg je columns met ongelijke hoogte mooi naast en onder elkaar.

Als een tablet draait (van landschap naar portret) en de div met tekst erin smaller wordt, dan wordt de div hoger, dus de height verandert dan, dan moet de height van de andere div's mee gaan om de zelfde height te houden.

En jQuery / javascript is client side en PHP serversite

Hier een simpel voorbeeldje.

Code:

	<script>
		$(document).ready(function() {


		    var rowheight = $('.row').height()+20;


		    $(window).resize(function (){


		        $('.col').css('height', rowheight+'px');




		    });
		    $(window).trigger('resize');
		});
	</script>

De beste oplossing is om gebruik te maken van flexbox. Sam Leurs gaf al een link die precies doet wat er gevraagd wordt.
De tweede beste oplossing is die van Rkas om van je cols een table-cell te maken.

Alle JavaScript/jQuery oplossingen zijn gewoon slechte oplossingen.
HTML gebruik je voor structuur
CSS voor styles
Javascript voor logica.

Als je JavaScript voor styling gaat gebruiken terwijl er een CSS oplossing is, ben je verkeerd aan het ontwikkelen. JavaScript is daarvoor vele malen trager en een stuk minder functioneel dan CSS.

Flexbox is geen optie, dat werkt niet in IE 9 of lager. Het gaat om de "project" div in de kolom en niet om de kolommen zelf.
Dit werkt dus niet:

Code:

#projects .row
{
    display: table;
}
#projects .row .col-xs-12
{
    display: table-cell;
    float: none;
}

Origineel gepost door R van Breugel

Flexbox is geen optie, dat werkt niet in IE 9 of lager. Het gaat om de "project" div in de kolom en niet om de kolommen zelf.
Dit werkt dus niet:

Code:

#projects .row
{
    display: table;
}
#projects .row .col-xs-12
{
    display: table-cell;
    float: none;
}

Fallback

http://stackoverflow.com/questions/2...native-for-ie9

Origineel gepost door R van Breugel

Flexbox is geen optie, dat werkt niet in IE 9 of lager.

IE 9 wordt door 0.58% van de internetters gebruikt. Gewoon negeren, laat ze maar eens een nieuwe pc kopen.

Origineel gepost door Wilbert E.

IE 9 wordt door 0.58% van de internetters gebruikt. Gewoon negeren, laat ze maar eens een nieuwe pc kopen.

Dat is toch geen antwoord op mijn probleem? De kolommen zijn nu dezelfde hoogte.
In de kolommen zit een "project" div. Deze moeten ook dezelfde hoogte krijgen.

Dit is wat ik nu heb (maar dat werkt niet):

Code:

#projects .row
{
    display: table;
}
#projects .row .col-xs-12
{
    display: table-cell;
    float: none;
}
#projects .row .col-xs-12 .project
{
    height: 100%;
}

Maak eens een jsfiddle of een codepen. Nu is het gokken wat er allemaal gebeurd.

Zie hier de website waar het om gaat..
http://goo.gl/RhjtyC

Tenzij je ondersteuning wilt geven aan 0.58% van de Nederlandse bevolking die nog op IE 9 internet werkt de flexbox tutorial gewoon.

Code:

#services .row{
    display: flex;
    flex-wrap: wrap;
}

#services .row .col-sm-4{
    display: flex;   
}

Jeetje wat doen jullie moeilijk.
Verdiep je eens in css/bootstrap/less en media breakpoints