How can I hide a cell on a specific breakpoint?

I have the following base layout, which I now would like to transform into a responsive grid using pure css.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... --> 
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">Navigation</div>

        <div class="pure-u-5-24">left space</div>

        <div class="pure-u-11-24">content</div>
        <div class="pure-u-3-24">ToC</div>

        <div class="pure-u-5-24">right space</div>

        <div class="pure-u-1">Footer</div>
    </div>
</body>
</html>

Unfortunately I have no clue how I can hide e.g. <div class="pure-u-3-24">ToC</div> on a specific breakpoint.

I had a look into the base file pure.css as well as the css containing the classes for the grid grids-responsive.css. There seems to be no such thing as .hidden-*-down class known from Bootstrap. Also I coudn't find any (purecss-) utilities to accomplish this.

How can I accomplish my goal and hide an element on a specific breakpoint using PureCSS?

Solution

You can use media queries. ToC will hide under 728px.

@media screen and (max-width:728px){
  .pure-u-3-24 {
    display:none;
  }
}

<div class="pure-g">
  <div class="pure-u-1">Navigation</div>

  <div class="pure-u-5-24">left space</div>

  <div class="pure-u-11-24">content</div>
  <div class="pure-u-3-24">ToC</div>

  <div class="pure-u-5-24">right space</div>

  <div class="pure-u-1">Footer</div>
</div>