Materialize グリッドデザインにおける回り込みの回避（高さの設定？）について

Question

お世話になります。
CSSのレイアウトについて質問させていただきます。

###前提
CSSの経験はほとんどありません。
CSSフレームワークのMaterializeを使用して、WordpressのWEBサイトを作成しています。

###目標
レスポンシブなグリッドデザインを用いて、以下のようなレイアウトを構築したいです。

A,B,Cには画像やテキストをが含まれますが、それらはWordpressから取得するサイズが不定のものなので、各ブロックの高さが変動します。
例えば、
B1の高さ > C-1とC-2の高さの合計 の時は、C-2の下に余白ができ、
B2の高さ < C-3とC-4の高さの合計 の時は、B-2の下に余白ができるようにしたいです。
（最終的には、「余白」は塗りつぶして（拡張して？）、上の図の様に綺麗に整形したい考えです（※１））

###現状・課題
「A」と「B,C」をdivで囲い”row”クラスを定義し、
「A」には「col s12 m4」、「B,C」には「col s12 m8」を定義し並べています。
また、同様に「B」「C」を並べるためにそれぞれ「col s12 m6」を定義しています。

図の吹出しの通り、C-1,C-2の高さの合計がB-1に満たない時、B-2が右側に回り込んでしまう事が課題です。
また、回り込みが回避できた場合、余白を埋める方法（※１の解決策）についてもアドバイスいただけたら幸甚です。

###該当のソースコード

<div class="row">
    <div class="col s12 m4"> A </div>
    <div class="col s12 m8 row">
        <div class="col s12 m6"> B-1 </div>
        <div class="col s12 m6">
            <div> C-1 </div>
            <div> C-2 </div>
        </div>
        <div class="col s12 m6"> B-2 </div>
        <div class="col s12 m6">
            <div> C-3 </div>
            <div> C-4 </div>
        </div>
    </div>
</div>

本コードに関してCSSはカスタマイズしておらず、CDNで読み込んだMaterializeのグリッドデザインを使用しています。

以上、アドバイスのほど、何卒よろしくお願いいたします。

Comments

[Yasumi.Mizuki]

CSSも記載したほうがいいと思います･･･

[teradog]

ご指摘ありがとうございます。CSSはMaterializeを使用しており、該当箇所についてはオリジナルはありません。質問内容も合わせて説明を追記しておきます。

Answer 1

B-1, C-1, C-2
と
B-2, C-3, C-4
のグループをそれぞれ<div class="row">～</div>で囲めばいいのではないでしょうか？
デモページ

Comments

[teradog]

早速のご回答ありがとうございます。
ご指摘の通り、グルーピングすることで、右への回り込みを回避することができました。
ご助言、誠にありがとうございました。

修正コード（抜粋）
<div class="col s12 m8">　　← "row" を除外
<div class="row">　　← B-1,C-1,C-2 グルーピングはじまり
<div class="col s12 m6"> B-1 </div>
<div class="col s12 m6">
<div> C-1 </div>
<div> C-2 </div>
</div>
</div> ← グルーピング終わり
<div class="row"> ← B-2,C-3,C-4 グルーピングはじまり
<div class="col s12 m6"> B-2 </div>
<div class="col s12 m6">
<div> C-3 </div>
<div> C-4 </div>
</div>
</div>
</div>

p.s.
div入れ子構造や各ブロックの出力項目が繰り返しなので、phpのforeachを含む再帰関数でhtmlコードを書いみているのですが、divタグの出力位置にかなり混乱しました（汗）