@media screen and (min-width: 1px) and (max-width: 480.98px) {
    #columns[data-columns]::before {
        content: '1 .col-sm-12';
    }
	#grid[data-columns]::before {
		content: '1 .col-sm-12';
	}
	#coll-grid[data-columns]::before {
		content: '1 .col-sm-12';
	}
	#dir_grid[data-columns]::before { /* Dir option */
		content: '1 .col-lg-12';
	}
}

@media screen and (min-width: 481px) and (max-width: 767.98px) {
    #columns[data-columns]::before {
        content: '2 .col-lg-6';
    }
	#grid[data-columns]::before {
		content: '2 .col-lg-6';
	}
	#coll_grid[data-columns]::before {
		content: '2 .col-lg-6';
	}
	#dir_grid[data-columns]::before { /* Dir option */
		content: '1 .col-lg-12';
	}
}

@media screen and (min-width:768px) and (max-width: 991.98px) { 
    #columns[data-columns]::before {
        content: '2 .col-lg-6';
    }
	#grid[data-columns]::before {
		content: '2 .col-lg-6';
	}
	#coll_grid[data-columns]::before {
		content: '2 .col-lg-6';
	}
	#dir_grid[data-columns]::before { /* Dir option */
		content: '1 .col-lg-12';
	}
}

@media screen and (min-width:992px) and (max-width: 1199.98px) {
    #columns[data-columns]::before {
        content: '2 .col-lg-6';
    }
	#grid[data-columns]::before { /* updates */
		content: '2 .col-lg-6';
	}
	#coll_grid[data-columns]::before {
		content: '3 .col-lg-4';
	}
	#dir_grid[data-columns]::before { /* Dir option */
		content: '1 .col-lg-12';
	}
}

@media screen and (min-width:1200px) and (max-width: 1699.98px) {
    #columns[data-columns]::before {
        content: '3 .col-lg-4';
    }
	#grid[data-columns]::before {
		content: '2 .col-lg-6';
	}
	#coll_grid[data-columns]::before {
		content: '3 .col-lg-4';
	}
	#dir_grid[data-columns]::before { /* Dir option */
		content: '2 .col-lg-6';
	}
}

@media screen and (min-width:1700px) and (max-width: 9999px) {
    #columns[data-columns]::before {
        content: '4 .col-lg-3';
    }
	#grid[data-columns]::before {
		content: '2 .col-lg-6';
	}
	#coll_grid[data-columns]::before {
		content: '3 .col-lg-4';
	}
	#dir_grid[data-columns]::before { /* Dir option */
		content: '2 .col-lg-6';
	}
}
#columns, #grid, #coll_grid, #dir_grid { display:flex;}
#theGrid {}