remove css on tablet/mobile (responsive breakpoints)

Greetings. I added some CSS to create a masonry blog effect in the archive page, however, it looks terrible on mobile/tablet. So I only want to apply the CSS to Desktop.

I've read a few other support forums on the idea, but I haven't found what I'd like to call the preferred WPMUDEV way of handling this - the Upfront way.

Should I move my CSS from the element and into Global CSS and create media breakpoints? Or is there a way to add the breakpoints to element CSS?

Here is the CSS I'm using in the Posts element:

/* Masonry Custom CSS  */
/* Masonry container */
body.blog div#content, body.archive div#content, .uposts-object ul {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article, .uposts-object li {
  background-color: #eee;
  border: 1px solid #222;
  display: inline-block;
  margin: 0 0 1em;
  padding: 1em;
  width: 100%;
}