0

I have created a bootstrap grid page and it's working as I want on desktop screen.

My actual problem is when I use mobile, I can't get how to reorder my cards in right way.

Here's my logic

<div class="row">
  <div *ngFor="let col of [1,2]; let index=index" class="col-12 col-sm-6 col-xl-6">
    <div  *ngFor="let card of cards; let indexC=index" class='col-sm-12' >
      <app-expend  [card]="card" *ngIf="indexC%2===index"></app-expend> //card[1] = Hi1
    </div>
  </div>
</div>

The reason why I can't use a row with all colums inside is that When I expand other columns don't shift.

Here's a sample

What I expect is having column on mobile in this order

Hi1                Hi1
Hi2                Hi3
Hi3   Instead of   Hi5
Hi4                Hi2
Hi5                Hi4
Hi6                Hi6

And in desktop ( already done ) :

Hi1  Hi2  
Hi3  Hi4
Hi5  Hi6

the code should looks like something like this 

<div class="row">
    <div  *ngFor="let card of cards; let indexC=index" class='col-sm-12' >
      <app-expend  [card]="card"></app-expend> //card[1] = Hi1
    </div>
</div>
infodev
  • 4,673
  • 17
  • 65
  • 138
  • Possible duplicate of [How do I change Bootstrap 3 column order on mobile layout?](https://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout) – Tushar Walzade Mar 06 '19 at 14:14
  • 1
    You cannot create that pattern with Bootstrap. You would need to change the order of the elements in your array on the component. – Randy Casburn Mar 06 '19 at 14:15
  • Refer [this](https://codepen.io/ondrejsvestka/pen/qmbeMe) – Tushar Walzade Mar 06 '19 at 14:16
  • @TusharWalzade - Can you replicate the OP's use case in that example? Three rows placed beneath rather than a single row above? – Randy Casburn Mar 06 '19 at 14:19
  • I have two columns col1 contains Hi1,Hi3,Hi5 and col2 contains hi2,Hi4,hi6 given that my child cols are inside two parent cols, I don't see how to change order. Its possible to invert col1 and col2 but what I need is to mix child columns in order that Col1 contain Hi1,Hi2,Hi3 and Col2 contain Hi4,Hi5,Hi6 – infodev Mar 06 '19 at 14:33
  • 1
    Alternatively, you could use CSS Grids - in which you can define the order in CSS. – Randy Casburn Mar 06 '19 at 16:39
  • Can you provide an example on stackblitz with css grid to solve my problem ? – infodev Mar 07 '19 at 15:16

1 Answers1

0

It works perfectly when applied proper classes like - col-xl-6 col-lg-6 col-md-6 col-sm-12. So your snipper would be -

<div class="row m-2">
    <div *ngFor="let card of cards; let indexC=index" class='col-xl-6 col-lg-6 col-md-6 col-sm-12' >
      <app-expend  [card]="card"></app-expend>
    </div>
</div>

Check it live here, try resizing the output window.

  • Snaps of output -

1. On large screen large screen

2. On small screen

small screen*

Tushar Walzade
  • 3,737
  • 4
  • 33
  • 56