グリッドを持つジグザグを停止するW3.CSS

Question

私はW3.CSSでページをスタイリングし、その代わりにグリッドを使用しています。私はクラス "w3-col s6 l3"を持っていると思っている4つのdivを持っていて、W3が小さな画面を検出すると、そのような列を置くが、それはそれらをずらす。私はdivのトップをお互いにしてもらいたいと思っています。ここで

<div class="w3-row"> 
    <div class="w3-col s6 l3 w3-green w3-center"> 
    <p>s6</p><p>s6</p><p>s6</p><p>s6</p> 
    </div> 
    <div class="w3-col s6 l3 w3-dark-grey w3-center"> 
    <p>s6</p><p>s6</p><p>s6</p> 
    </div> 
    <div class="w3-col s6 l3 w3-blue w3-center"> 
    <p>s6</p><p>s6</p> 
    </div> 
    <div class="w3-col s6 l3 w3-grey w3-center"> 
    <p>s6</p><p>s6</p><p>s6</p><p>s6</p> 
    </div> 
</div> 

が大画面は次のようになります。

これは、小さな画面での結果である：

これは私が達成するために探していますものです：

この例は http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_two_equal&stacked=hにありますとセクションに段落を追加します。私はjsfiddleを作ろうとしましたが、運がありませんでした。とにかく、望みの結果を得るための考え方がありますか？ありがとう！

Answer 1

まずこのスタイルを追加：

.flex { 
display: -webkit-flex; 
-webkit-flex-wrap: wrap; 
display: flex; 
flex-wrap: wrap; 
flex: 1; 
min-width: 400px;/*or how much you want. It means that if your page has width higher than 800px divs are side by side picture one but if it is lower than 800px they go upon each other picture 3*/ 
} 

.w3-col { 
    flex: 1; 
/*If you do not use min-width: 400px, here must set a width or min width*/ 
} 

を、これにあなたのHTMLコードを変更：

<div> 
     <div class="w3-row flex" > 
      <div class="flex"> 
       <div class="w3-col s6 l3 w3-green w3-center"> 
        <p>s6</p> 
        <p>s6</p> 
        <p>s6</p> 
        <p>s6</p> 
       </div> 
       <div class="w3-col s6 l3 w3-dark-grey w3-center"> 
        <p>s6</p> 
        <p>s6</p> 
        <p>s6</p> 
       </div> 
      </div> 
      <div class="flex"> 
       <div class="w3-col s6 l3 w3-blue w3-center"> 
        <p>s6</p> 
        <p>s6</p> 
       </div> 
       <div class="w3-col s6 l3 w3-grey w3-center"> 
        <p>s6</p> 
        <p>s6</p> 
        <p>s6</p> 
        <p>s6</p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 2

は正確に何をしたいではないかもしれませんがhereはjQueryを使ってうまく機能するソリューションです。これはdivが幅の半分のときに機能し、必要に応じてパラメータを変更できるように簡単に変更できます。

$('div:nth-child(2n)').each(function(){ 
    var height = $(this).height(), 
     prevHeight = $(this).prev().height(), 
     padding = prevHeight - height; 

    if(padding > 1) { 
    $(this).css({ 
     'margin-bottom': padding + 'px' 
    }); 
    } 
})