最も簡単な応答グリッド・フェイル

Question

2つの隣接するボックスを含む単一の列で応答グリッドを作成しようとしています。左に1/3の列、右に2/3の列。ここhttp://codepen.io/htmlcheats/pen/OWMobOでcodepen上の非応答性のバージョンがあります：

<div class="pure-g"> 
    <div class="pure-u-1-3" style="background-color: red; height: 10em;"> 
     Box 1 - 33.3% width uses pure-1-3 style 
    </div><!-- .pure-u-1-3 --> 
    <div class="pure-u-2-3" style="background-color: teal; height: 10em;"> 
     Box 2 - 66.6% width uses pure-2-3 style 
    </div><!-- .pure-u-2-3 -->  
</div><!-- .pure-g --> 

期待どおりに動作します。私がそれらを一緒に踏みつぶすか、伸ばすと、それらは隣接したままになります。

はここ（http://codepen.io/htmlcheats/pen/OWMobOでcodepen）応答バージョンです：

<div class="pure-g">  
    <div class="pure-sm-md-1-3 pure-u-md-1-3 pure-u-lg-1-3 pure-u-1" style="background-color: red; height: 10em;"> 
     Box 1 - 33.3% width uses pure-1-3 style 
    </div><!-- .pure-u-1-3 --> 
    <div class="pure-sm-md-2-3 pure-u-md-2-3 pure-u-lg-2-3 pure-u-1" style="background-color: teal; height: 10em;"> 
     Box 2 - 66.6% width uses pure-2-3 style 
    </div><!-- .pure-u-2-3 --> 
</div><!-- .pure-g --> 

私は、彼らはまだお互いの上に残っているページをつぶす

。私が正しく理解していれば、彼らは崩壊して、赤ちゃんの上に赤い箱を立てた状態で単一の柱を作ります。

私が間違っていることを教えてもらえますか？

Answer 1

あなたの質問の2つのコードリンクは同じです（応答しないものと応答のあるもの）が同じです - あなたの例の応答しないバージョンにリンクしていますが、あなたのresponsive exampleと思われるものが見つかりました。

とにかく、purecssでレスポンスグリッドを有効にするには、別のレスポンスグリッドCSSファイルとベースpurecssファイルを含める必要があります。 responsive grids documentationから：

メディアクエリは上書きできないため、私たちはpure.cssの一部としてグリッドシステムを含めません。別のCSSファイルとして取り込む必要があります。あなたのページに次のタグを追加することでこれを行うことができます。

<!--[if lte IE 8]> 
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css"> 
<![endif]--> 
<!--[if gt IE 8]><!--> 
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css"> 
<!--<![endif]--> 

私はあなたのペンの応答バージョンを取り、応答性のCSSファイル（上記のコードブロック）へのリンクを追加し、それworks as expected。 CSSリンクは次のようになります：

<!-- base purecss file --> 
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous"> 

<!-- purecss responsive grids --> 
<!--[if lte IE 8]> 
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css"> 
<![endif]--> 
<!--[if gt IE 8]><!--> 
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css"> 
<!--<![endif]-->