Try to resize:http://codepen.io/anon/pen/zxGbbx
<ion-content>
<ul class="list">
<a class="item" ng-repeat="thread in data" ng-href="{{thread.url}}" target="_blank">
<li class="">
{{thread.title}}
<span class="desc">{{thread.desc}}</span>
<span class="item-note badge badge-assertive">{{thread.replies}}</span>
</li>
</a>
</ul>
</ion-content>
Where should I apply the class of 'row responsive-sm' and the class of 'col'? I tried to play around but still doesn't work. my thread.title is too long and overflowed the screen.
I assume that you want to apply the grid structure to each list item..
So, here's how you can play with row and cols.
<ul class="list">
<a class="item" ng-repeat="thread in data track by $index" ng-href="{{thread.url}}" target="_blank">
<li class="row">
<div class="col col-80">
<span class="row responsive-sm item-text-wrap">{{thread.title}}</span>
<span class="row responsive-sm">{{thread.desc}}</span>
</div>
<div class="col">
<span class="item-note badge badge-assertive">{{thread.replies}}</span>
</div>
</li>
</a>
</ul>
Updated Plunker here