<div class="css-grid">
  <div class="grid-item-1">Thing 1</div>
  <div class="grid-item-2">Thing 2</div>
  <div class="grid-item-3">Thing 3</div>
</div>

.css-grid {
    display: grid;
	grid-gap: 1rem;
	/*
	* For Mobile, 
	* I want the elements to show up in a column and the element order to be: 
	*   "THING 1"
	*	"THING 3" 
	*	"THING 2"
	*/
	grid-template-areas: 'gridItem1' 
						 'gridItem3' 
						 'gridItem2';

	border: solid 1px #fdcb6e;
	color: white;
	font-size: 1.5rem;
	text-transform: uppercase;
	height: 39rem;
	width: 12rem;
	margin: 2rem auto;
	padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
	.css-grid {
		/*
		* For Tablet, 
		* I want the elements to show up in a row and the element order to be: 
		*   "THING 3"
		*	"THING 2" 
		*	"THING 1"
		*/
		grid-template-areas: 'gridItem3 gridItem2 gridItem1';

		height: auto;
		width: 39rem;
	}
}
  
/* Desktop */
@media (min-width: 992px) {
	.css-grid {
		/*
		* For Tablet, 
		* I want the elements to show up in a row and the element order to be: 
		*   "THING 1"
		*	"THING 2" 
		*	"THING 3"
		*/
		grid-template-areas: 'gridItem1 gridItem2 gridItem3';
	}
}

.grid-item-1,
.grid-item-2,
.grid-item-3 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12rem;
	height: 12rem;
}

.grid-item-1 {
	grid-area: gridItem1; /* assigning of grid area name for grid item 1 */
	background-color: #00cec9;
}

.grid-item-2 {
	grid-area: gridItem2; /* assigning of grid area name for grid item 2 */
	background-color: #6c5ce7;
}

.grid-item-3 {
	grid-area: gridItem3; /* assigning of grid area name for grid item 3 */
	background-color: #e84393;
}