CodePen

HTML

            
              <div class="container">
  <div class="grid-4 tab desk phone">
    <h1>I'm here all the time</h1>
  </div>
  <div class="grid-4 desk">
    <h1>I'm only here on the desktop</h1>
  </div>
  <div class="grid-4 tab desk">
    <h1>I'm not here on the phone</h1>
  </div>
</div>
            
          
!

CSS

            
              .container{
  width: 60%;
  margin: 0 auto;
}

.grid-4{
  width: 100%;
  float: left;
  min-height: 150px;
  background: #DDDDDD;
  display: none;
}

.phone{
  display: block;
}

@media only screen and (min-width:480px){
  .grid-4{
    width: 50%;
  }
  
  .tab{
    display: block;
  }

}

@media only screen and (min-width:800px){
  .grid-4{
    width: 33.33333%;
  }
  
  .desk{
    display: block;
  }
}



/* TYPOGRAPHY */

h1{
  font-family: 'helvetica neue', 'helvetica', 'pt sans', 'arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}

/* RESETS */

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................