html - Pure.CSS レスポンシブ グリッド列をボタンに折りたたみ、可能な最大幅を修正

Question

Pure.css と Pure の grids-responsive.css を使用して、特定の幅よりも小さくなったらグリッド列をボタンに折りたたむ方法はありますか?

<div class="pure-g">
    <div class="l-box pure-u-1-3 pure-u-md-1-4 pure-u-lg-1-6">
        <h2>Info area, collapse when screen very narrow, constrain when screen wide</h2>
    </div>
    <div class="l-box pure-u-2-3 pure-u-md-3-4 pure-u-lg-5-6">
        <h2>Main area, greedy</h2>

また、画面の幅に応じて列 (たとえば、上の左の列) を維持する方法はありますが、画面が非常に広い場合は固定の最大幅に制限されますか?