如何使用物化创建面向列的布局？

Question

我正在尝试使用物化框架将两张纸牌放在一张大纸牌之间。

我当前正在使用的代码如下：

<div class="row">   
<div class="col s6">
      <div class="card-panel">        
          <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p1</h5>
          </div>      
      </div>
</div>
<div class="col s6">
      <div class="card-panel">
        <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p3</h5> 
        </div>    
      </div>
</div>
<div class="col s6">
      <div class="card-panel">        
          <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p2</h5>
          </div>      
      </div>
</div>
</div>

结果如下：

但是我想将p1和p2直接放在p3旁边，以便布局看起来像这样：

使用物化可以通过某种方式实现吗？

Answer 1

You can try something like this.

<div class="row">
   <div class="col s6">
     <div class="row">
       <div class="col-12">
         P1
       </div>
     </div>
     <div class="row">
       <div class="col-12">
          p2
       </div>
     </div>
   </div>

   <div class="col s6">
      P3
   <div>
</div>