Filter page in Bootstrap 4

I’ve got a page that I’m currently working on that needs to upto 100 courses. I’m afraid that will take up too much of the page. So I want to break these courses up into 4 ‘Regions’, and then filtered down to the location within those regions. I’d also like a sort functionality so the user can sort by start date and alphabetical order. A codepen example that would be very similar to what I’m after can be found at this URL: https://codepen.io/Vestride/pen/ZVWmMX. I don’t want any images, just simply the card with information including: Course name, Start & End Date, and CTA button.