Hello !
Bootstrap gère 4 tailles d'écran : XS (Extra small < 768px pour les smartphones), SM (Small < 992px pour les tablettes), MD (Medium < 1200px pour les petits portables) et LG (pour les portables et fixe > 1200px). Tu peux ainsi définir le comportement en fonction de la résolution de l'utilisateur.
Cela dépend donc de la résolution de l'écran qui n'est pas sensé changer (même si on peut réduire la taille d'une fenêtre sur pc). Il n'est donc pas prévu de transition (si c'est ce que tu entends par "trop rapide"). Il faut simplement choisir la disposition souhaitée pour chaque taille, sachant que si rien n'est précisé, la plus "petite" instruction sera utilisée par défaut pour les plus grande.
Par exemple, un div avec une classe "col-xs-9" aura une taille de 9 sur toutes les résolutions, tandis qu'avec une classe de "col-xs-9 col-md-6", aura une taille de 9 en XS et SM, mais de 6 en MD et LG. Et si rien n'est précisé (pas de valeur pour la résolution utilisée ou les résolutions inférieures), la valeur par défaut est de 12, soit toute la largeur.
Lorsque l'on change de résolution sur le site que tu mentionnes, les 3 blocs de droite restent les uns sous les autres, comme sur ton codepen. Je ne vois donc pas bien ce que tu cherches à obtenir...
Tu peux éventuellement faire un schéma de ce que tu souhaites obtenir pour chaque résolution (en commençant par la plus petite car c'est la plus contraignante.). En voyant comment les blocs se positionnent, tu devrais y voir plus clair pour savoir ou mettre des row et des col-xs/sm/md/lg
