Html 为什么这样做不负责任？

我有下面的SASS和HTML代码。我正在使用雅虎的PureCSS

我想做的事

我试图让它在大型桌面屏幕上有一个3列布局，基本上以

pure-lg-3-24

类作为边距，然后将其折叠为移动屏幕的1列布局

实际发生的情况

当我将

pure-u-1

添加到下面的类中时（在一个大的桌面大小的浏览器宽度中），所有html内容都归入一列。如果我删除

pure-u-1

，它会全部折叠在一起，文本彼此重叠，无法阅读。为什么会这样？让它做出反应的出发点是什么？我以为嵌套网格是允许进入的

SASS

#layout {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e1e1e1;

  .pure-g {

    h1 {
      font-family: Georgia, serif;
      a {
        text-decoration: none;
        color: #990000;
      }
    }

    h2 {
      font-size: 1em;
      font-weight: normal;
    }
    mark {
      color: #990000;
      background: none;
      font-weight: 700;
    }

  }

}

ul.languages {
  list-style-type: none; 

  li.active {
    font-weight: 700;

    a {
      color: #666;
    }
  }

  li {
    display: inline;
  }

}

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
 :
<header id="layout" class="pure-g">
  <div class="pure-u-1 pure-u-lg-3-24">&nbsp;</div>
  <div class="pure-u-1 pure-u-lg-18-24">

    <div class="pure-g">
      <div class="pure-u-1 pure-u-lg-12-24">
        <h1><a href="/">Trial Dates</a></h1>
      </div>
      <div class="pure-u-1 pure-u-lg-12-24">
        <p>Contact us at <mark>(800) 800-COLLECT</mark></p>
      </div>
    </div>
    <div class="pure-g">
      <div class="pure-u-1 pure-u-lg-12-24">
        <h2>Tagline</h2>
      </div>
      <div class="pure-u-1 pure-u-lg-12-24">
        <ul class="languages">
          <li class="active">
            <a href="#">English</a>
          </li>
          <li>
            <a href="#">Español</a>
          </li>
          <li>
            <a href="#">漢語</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
  <div class="pure-u-1 pure-u-lg-3-24">&nbsp;</div>
</header>

:
请致电（800）800-COLLECT与我们联系

标语

事实证明，根据的一部分，除了核心纯css之外，您还需要添加以下内容：

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->