Bootstrap Row'un içine 6'dan col-md-2 atama

Başlığı doğrumu açtım bilmiyorum ancak, sabahtan beri bakıyorum bulamıyorum, row'un içine grid mantığıyla col-md-2 den 6 tane koyulabiliyor ben bunları daha fazla koymak istiyorum.
Sorun yaşadığım yerin linki; https://kalaycibey.com/at-yarisi/kup...-kosusu-583742
orda 6 tane ayak var 6x2 den 12'li gridi tamamlıyorum ancak 7.ayağı koyunca aşşağı düşüyor ve ben bunun yanına gelmesini istiyorum, nasıl bir yol izlemeliyim ?

şöyle bir link atsam sanırım yardımcı olacaktır.
https://codepen.io/knitevision1/pen/BAFmk
standarta bağlı eksik kısımları:

@media (min-width: 768px){ .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 100%; *width: 100%; } } @media (min-width: 992px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; } }

Bu tür durumlarda kendi class'ınızı kendiniz oluşturmayı deneyebilirsiniz. Bootstrap her ne kadar kolaylık sağlıyor gibi görünse de bazen işin içinden çıkılmaz duruma gelebiliyor. Şekil A'da görüldüğü gibi. Aslında BootStrap kullanmadan kodlamayı öğrenseniz en iyisi o.