Использование материализации css .col divs для создания (не следует следовать строке строки), чтобы сделать что-то вроде следующего изображения

Question

Я использую Materialize css для создания блога. И трудно найти что-то с материализованными столбцами сетки. См. Ниже описание ниже ...

Мой html-код выглядит следующим образом.

<div class="row"> 
 
    <div class="col l6 m12 s12"> 
 
    <div class="my-content"> 
 
     -----FIRST-content-goes-here----- 
 
    </div> 
 
    </div> 
 
    <div class="col l6 m12 s12"> 
 
    <div class="my-content"> 
 
     -----SECOND-content-goes-here----- 
 
    </div> 
 
    </div> 
 
</div> <!--row -->

Игнорирование Css часть, изображение ниже обозначает, как это работает:

Но я хочу, чтобы (.l6) столбцы, которые будут созданы, как и в на этот снимок:

Я думаю, что CSS играет роль для этих позиций divs, и любая помощь будет оценена.

Answer 1

использование можно сделать легко используя CSS3 flexbox.

Я добавил фрагмент ниже.

.col{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    } 
 
.box{ 
 
    width:100px; 
 
    height:100px; 
 
    background:gray; 
 
    border:1px solid #000; 
 
    } 
 
.parent{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    } 
 
.diff{ 
 
    height:200px; 
 
    } 
 
.one{ 
 
    height:70px; 
 
    } 
 
.three{ 
 
    height:30px; 
 
    }

<div class="parent"> 
 
    <div class="col"> 
 
     <div class="box"> 
 
     </div> 
 
     <div class="box"> 
 
     </div> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    <div class="col dif"> 
 
     <div class="box one"> 
 
     </div> 
 
     <div class="box diff"> 
 
     </div> 
 
     <div class="box three"> 
 
     </div> 
 
    </div> 
 
</div>