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

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

Мой 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,и любая помощь будет оценена.

1 ответ

  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>