How to make app responsive

i have created one layout in that i display some rows and columns but problem is that when i set screen to small at that time some data not display. but i want that field goes in next line.

please check below image.
in this image u see Order Date …it display proper

in this image i do small screen so order date not display properly

code that i used

<ion-content class="topup-receive-list">
<ion-item *ngFor="let item of list">
<ion-row>
    <ion-col width-25><div>Firm Name</div></ion-col>
    <ion-col width-75><div>{{item.firm}}</div></ion-col>
</ion-row>
<ion-row>
    <ion-col width-25><div>Order Date</div></ion-col>
    <ion-col width-75><div>{{item.odate}}</div></ion-col>
</ion-row>
<ion-row>
    <ion-col width-50><div>{{"Order Amount: " + item.oamount}}</div></ion-col>
    <ion-col width-50 text-right>{{"Topup: " + item.topup}}</ion-col>
</ion-row>
<ion-row>
    <ion-col width-25><div>Mode</div></ion-col>
    <ion-col width-75><div>{{item.mode}}</div></ion-col>
</ion-row>
<ion-row>
    <ion-col width-25><div>Topup Date</div></ion-col>
    <ion-col width-75><div>{{item.tdate}}</div></ion-col>
</ion-row>
<ion-row>
    <ion-col width-25><div>Wallet</div></ion-col>
    <ion-col width-75><div>{{item.wallet}}</div></ion-col>
</ion-row>
</ion-item>
</ion-content>

you’ll need to write some classes yourself. But I think your testcase is a situation that you won’t face, i don’t think there are devices which are only 282px wide. The iPhone 5 is even only 320px wide, and thats one of the smallest screens out there.

But, you could add classes like width-sm-25 (and media queries) in the bootstrap philosophy if you need that.

there are responsive grid lines that alike to bootstrap or you can use media queries… I think ionic support media queries…

if possible please post code for media queries or for classes like width-sm-25.