title: mobile responsive with bootstrap grid and expandable columns
body: <p>I have created a bootstrap grid page and it's working as I want on desktop screen.</p>
  
  <p>My actual problem is when I use mobile, I can't get how to reorder my cards in right way.</p>
  
  <p>Here's my logic</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div *ngFor="let col of [1,2]; let index=index" class="col-12 col-sm-6 col-xl-6"&gt;
      &lt;div  *ngFor="let card of cards; let indexC=index" class='col-sm-12' &gt;
        &lt;app-expend  [card]="card" *ngIf="indexC%2===index"&gt;&lt;/app-expend&gt; //card[1] = Hi1
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The reason why I can't use a row with all colums inside is that When I expand other columns don't shift.</p>
  
  <p>Here's a <a href="https://stackblitz.com/edit/angular-ng-bootstrap-independent-cards-test-y9buuf?file=app/app.component.html" rel="nofollow noreferrer">sample</a> </p>
  
  <p>What I expect is having column on mobile in this order</p>
  
  <pre><code>Hi1                Hi1
  Hi2                Hi3
  Hi3   Instead of   Hi5
  Hi4                Hi2
  Hi5                Hi4
  Hi6                Hi6
  </code></pre>
  
  <p>And in desktop ( already done ) :</p>
  
  <pre><code>Hi1  Hi2  
  Hi3  Hi4
  Hi5  Hi6
  </code></pre>
  
  <p>the code should looks like something like this </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div  *ngFor="let card of cards; let indexC=index" class='col-sm-12' &gt;
        &lt;app-expend  [card]="card"&gt;&lt;/app-expend&gt; //card[1] = Hi1
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>