Cacher is the code snippet organizer for pro developers

/* Add the following in child theme’s style.css and modify to suit: */
.flexbox-grid {
	margin-top: 40px;
}

.box-row {
	padding: 20px;
	margin-bottom: 20px;
	background-color: #007fff;
	border-radius: 2px;
}

.flexbox-grid p {
	margin-bottom: 0;
}

Add the needed markup to display your desired content in a grid by following the examples on Flexbox Grid’s site.

Ex.:
<div class="flexbox-grid">
	<div class="row">
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
			<div class="box-row"></div>
		</div>
		<div class="col-xs-6 col-sm-6 col-md-8 col-lg-10">
			<div class="box-row"></div>
		</div>
		<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1">
			<div class="box-row"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
			<div class="box-row"></div>
		</div>
		<div class="col-xs-12 col-sm-9 col-md-10 col-lg-11">
			<div class="box-row"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-10 col-sm-6 col-md-8 col-lg-10">
			<div class="box-row"></div>
		</div>
		<div class="col-xs-2 col-sm-6 col-md-4 col-lg-2">
			<div class="box-row"></div>
		</div>
	</div>
</div>

// Load Flexbox Grid
add_action( 'wp_enqueue_scripts', 'sk_enqueue_flexbox_grid' );
function sk_enqueue_flexbox_grid() {

	wp_enqueue_style( 'flexboxgrid', CHILD_URL . '/css/flexboxgrid.min.css' );

}

https://sridharkatakam.com/flexbox-grid-genesis/

Step 1

Upload flexboxgrid.min.css to child theme’s css directory (create if not existing).