移动响应与引导电网和可扩展的列(mobile responsive with bootstrap g

我创建了一个自举电网页面，它的工作，因为我想桌面屏幕上。

我实际的问题是，当我用手机，我不能得到如何重新安排我的卡在正确的道路。

这里是我的逻辑

<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>

为什么我不能用一排内的所有colums的原因是，当我展开其他列不会发生变化。

这里有一个样本

我希望在这个顺序设置在具有移动列

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

而在桌面上（已经完成）：

Hi1  Hi2  
Hi3  Hi4
Hi5  Hi6

代码应该看起来像这样的事情

<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>

Answer 1:

-当应用样正确类它完美col-xl-6 col-lg-6 col-md-6 col-sm-12 。 所以，你剪断会 -

<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>

检查住在这里 ， 尝试调整输出窗口 。

• 输出的捕捉 -

1.在大屏幕

2.在小屏幕

*

文章来源: mobile responsive with bootstrap grid and expandable columns