jQueryプラグイン、jquery.matchHeight.jsの使い方です。全てのページ共通で、以下のhtml構造でテストします。デモページではクラス名boxのdivタグは12個並べています。

<div class="container">
	<div class="box">
		<img src="images/photo01.jpg" alt="">
		<h3>タイトル01</h3>
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="box">
		<img src="images/photo02.jpg" alt="">
		<h3>タイトル02<br>タイトル02</h3>
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="box">
		<img src="images/photo03.jpg" alt="">
		<h3>タイトル03<br>タイトル03<br>タイトル03</h3>
		<p>ダミーテキスト</p>
	</div>
	<div class="box">
		<img src="images/photo04.jpg" alt="">
		<h3>タイトル04</h3>
		<p>ダミーテキスト</p>
	</div>
</div>

flexboxのみ（align-itemsプロパティなし：初期値のnormal）

jquery.matchHeight.js導入前のflexboxのみのページです。aline-itemsプロパティを指定していないため、初期値のnormalが適用されます。flexアイテムの高さは一番縦幅の大きいflexアイテムと同じになり、これは行単位で適用されます。aline-itemsプロパティにflex-startを指定すると高さが揃わなくなるため注意が必要です。
なお、高さの異なるh3タグ（タイトル部分）の高さをflexboxで揃えることはできません。

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.box {
	width: calc(25% - 30px / 4);
	margin: 0 10px 10px 0;
	border: 1px solid #ddd;
	background: #fff;
}
.box:nth-child(4n) {
	margin: 0 0 10px 0;
}
@media screen and (max-width: 768px) {
	.box {
		width: calc(100% / 3 - 20px / 3);
	}
	.box:nth-child(3n) {
		margin: 0 0 10px 0;
	}
	.box:nth-child(4n) {
		margin: 0 10px 10px 0;
	}
	.box:nth-child(12) {
		margin: 0 0 10px 0;
	}
}

matchHeightデモ（タイトルに適用）

タイトルにjquery.matchHeight.jsを適用します。タイトルのh3タグを指定することで、h3タグの高さは一番縦幅の大きいh3タグと同じになります。これは行単位で適用されます。

$(window).on('load resize',function() {
	$('h3').matchHeight();
});

matchHeightデモ（オプションbyRow: falseをタイトルに適用）

タイトルにjquery.matchHeight.jsを適用します。オプションでbyRow: falseを指定すると行単位の適用は解除されます。指定したh3タグの中で一番縦幅の大きいh3タグの高さが、全てのh3タグに適用されます。

$(window).on('load resize',function() {
	$('h3').matchHeight({
		byRow: false
	});
});

matchHeightデモ（オプションbyRow: falseをタイトルとクラス名boxに適用）

タイトルとクラス名boxのdivタグにjquery.matchHeight.jsを適用します。オプションでbyRow: falseを指定することで、全てのタイトルの高さとクラス名boxのdivタグの高さが揃います。

$(window).on('load resize',function() {
	$('h3').matchHeight({
		byRow: false
	});
	$('.box').matchHeight({
		byRow: false
	});
});

matchHeightデモ（768px以上でオプションbyRow: falseをタイトルに適用、767px以下でオプションremove: trueをタイトルに適用し解除）

タイトルにjquery.matchHeight.jsを適用します。768px以上でオプションのbyRow: falseを指定して全てのタイトルの高さを揃え、767px以下でremove: trueを指定して高さ揃えを解除します。

$(window).on('load resize',function() {
	if(matchMedia('only screen and (min-width: 768px)').matches) {
		$('h3').matchHeight({byRow: false});
	}
	if(matchMedia('only screen and (max-width: 767px)').matches) {
		$('h3').matchHeight({remove: true});
	}
});