Bootstrap-4 Cards align in a row to vertical

Question

In bootstrap 4, have created cards in 4 columns:

image 1

Trying to set the alignment to vertical, problem is how to create cards for each title and dispose them vertically.

And so it appears the cards ordered by the title in small devices:

image 2

If someone have a solution or clues please share.

Thank you.

See codepen: //codepen.io/miguelfernandesidesign/pen/eYrYjKY