Single column phone, double tablet

Hi guys :smile:

I’m wondering if someone can help me achieve a layout, where by the following HTML is showed as a single column on a phone, but instead of stretching to 1 huge and ugly column on a tablet, it is instead doubled up.

So there’d be a list of items under each other in 1 column on a phone, but the list would be 2 columns on a tablet. This is pretty standard behaviour on Bootstrap but I’m not sure how to achieve it in Ionic.

The HTML looks similar to:


By {{§}}

{{::onlineContent["other info"]}} credits
{{::onlineContent["last info"]}}

Thanks guys :smile:

So I found out how to create the layout I’m looking for :smile:

By creating 2 columns and using a row responsive-sm it works, the only problem is, this is all wrapped in an ng-repeat, so now I have the issue where everything is duplicated. So the layout is right, but there’s two of everything.

I’m not sure how to tell the 1 column to be ng-repeat index and the other to be ng-repeat index+1.

Any thoughts guys?

For anyone who is interested, I solved this in the following way:

I had 2 ng-repeats, 1 for the rows and 1 for the items making up the rows.

On my controller I have a function which breaks the original input array (all the items) into rows with items in each row:

$scope.breakIntoRows = function(array, columns) { var rowArray = []; for (var i=0; i<array.length; i+=columns) { rowArray.push(array.slice(i, i+columns)); } return rowArray; }

Then I call the function when I get the data back from my factory:

$scope.rows = $scope.breakIntoRows(result.videos, 2);

Then on the view it looks as follows:

<div class="row responsive-md" ng-repeat="row in rows">


Hope this helps someone :smile: