Попытка получить коллекцию карточек, которые были созданы, чтобы быть полностью отзывчивыми на экране Ipad Pro

Question

Мне удалось динамически создавать карты и заставить их реагировать через Bootstrap, CSS, and HTML. Однако в середине 11 рядов 1 карта появляется сама по себе. (См. Ниже) Всего 23 карты были созданы динамически. Я хочу, чтобы эта одинокая карточка появилась в последнем ряду страницы. Вот как это выглядит сейчас в Ipad, просматривая мой браузер Google chrome, когда я использую Inspect.

Вот код, который я использовал. Кто-нибудь знает, почему он это делает? Я использовал col-sm-4 col-md-6 col-lg-4, полагая, что на среднем экране потребуется 6 столбцов из сетки с 12 столбцами (т.е. половина или 2 на строку). Я также попытался отрегулировать высоту и ширину системы показателей, но не повезло. Любые выводы приветствуются.

<div class="col-sm-4 col-md-6 col-lg-4">
    <div class="ScoreCard">
        <div>
            <h3 style="background-color:@randomcode"> @@randomcode @@randomcode</h3>
        </div>
        <div class="col-lg-4 col-md-12">
            <div style="font-weight:bold; margin-top:35px;">
                <h1>$@randomcode</h1>
            </div>
        </div>
        <div class="col-lg-2 col-md-12" style="margin-top:35px;">

            @{ if (@randomcode == 1) {
            <i class="fas fa-circle" style="font-size:30px; color:red; margin-left:15px;"></i> } else if (@randomcode == 2) {
            <i class="fas fa-circle" style="font-size:30px; color:orange;margin-left:15px;"></i> } else if (@randomcode == 3) {
            <i class="fas fa-circle" style="font-size:30px; color:green;margin-left:15px;"></i> } else if (@randomcode == 4) {
            <i class="fas fa-lightbulb" style="font-size:30px; color:red;margin-left:15px;"></i> } else if (@randomcode == 5) {
            <i class="fas fa-lightbulb" style="font-size:30px; color:orange;margin-left:15px;"></i> } else if (@randomcode == 6) {
            <i class="fas fa-lightbulb" style="font-size:30px; color:green;margin-left:15px;"></i> } else if (@randomcode == 7) {
            <i class="fas fa-thumbs-down" style="font-size:30px; color:red;margin-left:15px;"></i> } else if (@randomcode == 8) {
            <i class="fas fa-thumbs-up" style="font-size:30px; color:green;margin-left:15px;"></i> } else if (@randomcode == 9) {
            <i class="fas fa-exclamation-triangle" style="font-size:30px; color:orange;margin-left:15px;"></i> } else if (@randomcode == 10) {
            <i class="fas fa-exclamation-triangle" style="font-size:30px; color:red;margin-left:15px;"></i> } }
        </div>
        <div class="col-lg-6 col-md-12 ">
            <div>

                @{ if (@randomcode > 0) {
                <p style="font-size:20px; margin-left: 25px;">Audited: $@@randomcode</p>
                } } @{ if (@randomcode > 0) {

                <p style="font-size:20px; margin-left: 25px;">Packages: @@randomcode</p>
                } } @{ if (@randomcode > 0) {

                <p style="font-size:20px; margin-left: 25px;">Transactions: @randomcode</p>
                } } @*

                <p style="font-size:20px;">icon #:@randomcode</p>*@
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-lg-12" style="margin-top: 5px;">
                <p style="margin-left:17px; font-weight:bold">@randomcode</p>
            </div>
        </div>
    </div>
</div>

} } }

<style>
    .ScoreCard {
        background-color: white;
        width: 420px;
        height: 350px;
        border: 15px black;
    }
</style>