Just starting to learn Angular and currently working on organizing cards in a bootstrap css layout.
Here is the current order of the cards:
- A F
- B G
- C H
- D I
- E J
When I resize the page to test responsiveness on a phone screen, the order corrects itself to A-J.
However, I would like the cards to be displayed in this order when in a two-column view:
- A B
- C D
- E F
- G H
- I J
I have tried solutions from various sources such as this answer and examples from this page, but so far my layout remains unchanged.
This is the code snippet I am currently using:
<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>
My issue is not misalignment of the cards, but rather their display order which is not as desired.