How to add a Bootstrap row with columns of different height with CSS?

To add a Bootstrap row with columns of different height with CSS, we use flexbox.

For instance, we write

.row {
  display: flex;
  flex-wrap: wrap;
}
.row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

to make the element with class row a flex container with display: flex;.

And we make the elements with class starting with col- in the elements with class row flex containers with display: flex;.