Как правильно выровнять CSS-карты в правильном порядке (по горизонтали, а не по вертикали)

Question

Новое в Angular. Работаем над тем, чтобы карты отображались в правильном порядке в макете начальной загрузки CSS.

Порядок, в котором они находятся в данный момент:

• F
• B G
• C H
• D I
• E J

Когда я сжимаю страницу вниз, чтобы проверить экран телефона, все в порядке, A-J.

Я бы хотел, чтобы порядок был таким, когда в виде двух столбцов:

• A B
• C D
• E F
• G H
• I J

Я думал, что смогу найти свое решение в этом ответе , или на этой странице , или в этом ответе , но мой макет остается таким же.

Вот с чем я работаю:

 <div class="card-columns mt-1 mb-5">
    <div class="card" *ngFor="let group of form.formGroup">
        <!-- <div class="card"> -->
        <div class="card-header">
            <h5 class="text-uppercase">
                {{group.title}}
                <span class="float-right">
                    <i class="fas fa-edit text-primary" (click)="open(content,group)"></i>
                </span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12" *ngFor="let control of group.fields">
                    <label class="text-uppercase"><strong>{{control.label}}</strong></label>
                    <div>
                       <button type="button" class="btn btn-lg btn-primary" disabled>{{datapersonal[control.model_property]}}</button>
                       <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Мои карты не смещены, как у других людей проблемы с. Просто они не в том порядке.

Answer 1

Ваш внешний div использует класс card-columns.Это заставляет их упорядочивать таким образом.Удалите этот класс, и они будут упорядочены так, как вы ожидаете.

<div class="mt-1 mb-5">
    <div class="card" *ngFor="let group of form.formGroup">
        <!-- <div class="card"> -->
        <div class="card-header">
            <h5 class="text-uppercase">
                {{group.title}}
                <span class="float-right">
                    <i class="fas fa-edit text-primary" (click)="open(content,group)"></i>
                </span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12 col-lg-6" *ngFor="let control of group.fields">
                    <label class="text-uppercase"><strong>{{control.label}}</strong></label>
                    <div>
                       <button type="button" class="btn btn-lg btn-primary" disabled>{{datapersonal[control.model_property]}}</button>
                       <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>