Bulma入れ子の列

Question

Bulmaでこれをどのようにマークできますか？私は以下のこのコードを使用しようとしているが、私は最初の列が2つのボックスを持って制限する必要がありますし、それは左から右に下がるでしょう。ブートストラップではこれは簡単ですが、Bulmaでは入れ子にされた列を1行で圧縮します。

<div class="tile is-ancestor"> 
<div class="tile is-4 is-vertical is-parent"> 
    <div class="tile is-child box"> 
    <p class="title">One</p> 
    </div> 
    <div class="tile is-child box"> 
    <p class="title">Two</p> 
    </div> 
</div> 
<div class="tile is-parent"> 
    <div class="tile is-child box"> 
    <p class="title">Three</p> 
    </div> 
</div> 

Answer 1

あなたがis-mobile修飾子を使用することができるように私は、columnsレイアウトを使用することをお勧めします。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css" rel="stylesheet"/> 
 
<div class="columns"> 
 
    <div class="column is-half"> 
 
     <div class="columns is-mobile"> 
 
     <div class="column is-half"> 
 
      <div class="box"> 
 
      <figure class="is-128x128"> 
 
       <img src="http://bulma.io/images/placeholders/128x128.png"> 
 
      </figure> 
 
      </div> 
 
     </div> 
 
     <div class="column is-half"> 
 
      <div class="box"> 
 
      <figure class="is-128x128"> 
 
       <img src="http://bulma.io/images/placeholders/128x128.png"> 
 
      </figure> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="columns is-mobile"> 
 
     <div class="column is-half"> 
 
      <div class="box"> 
 
      <figure class="is-128x128"> 
 
       <img src="http://bulma.io/images/placeholders/128x128.png"> 
 
      </figure> 
 
      </div> 
 
     </div> 
 
     <div class="column is-half"> 
 
      <div class="box"> 
 
      <figure class="is-128x128"> 
 
       <img src="http://bulma.io/images/placeholders/128x128.png"> 
 
      </figure> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="column is-half"> 
 
     <figure class="is-480x480"> 
 
     <img src="http://bulma.io/images/placeholders/480x480.png"> 
 
     </figure> 
 
    </div> 
 
    </div>

：おおよそのようなもの