javascript - Split array (indexed list) into two rows if on mobile -

in ionic project i'm trying integrate kind of indexed list horizontal. list now, want support small screen devices too, wanting split list in 2 rows screen smaller let's 700px.

desired output: http://tinypic.com/r/16gu3r/8
have far: http://plnkr.co/edit/20t3fpkfaq7p0qqtddeo

$scope.alphabet = {  a: {    name: "a",    amount: 0  },  b: {    name: "b",    amount: 0  },  c: {    name: "c",    amount: 0  },  d: {    name: "d",    amount: 0  },  e: {    name: "e",    amount: 0  },  f: {    name: "f",    amount: 0  },  g: {    name: "g",    amount: 0  },  h: {    name: "h",    amount: 0  },  i: {    name: "i",    amount: 0  },  j: {    name: "j",    amount: 0  },  k: {    name: "k",    amount: 0  },  l: {    name: "l",    amount: 0  },  m: {    name: "m",    amount: 0  },  n: {    name: "n",    amount: 0  },  o: {    name: "o",    amount: 0  },  p: {    name: "p",    amount: 0  },  q: {    name: "q",    amount: 0  },  r: {    name: "r",    amount: 0  },  s: {    name: "s",    amount: 0  },  t: {    name: "t",    amount: 0  },  u: {    name: "u",    amount: 0  },  v: {    name: "v",    amount: 0  },  w: {    name: "w",    amount: 0  },  x: {    name: "x",    amount: 0  },  y: {    name: "y",    amount: 0  },  z: {    name: "z",    amount: 0  }  };

.button-alphabet {    background: transparent;    color: #777;    width: 3.8%;    border: 1px solid #999;    display: inline;  }  .button-alphabet[disabled] {    border: none;  }  .button-alphabet:nth-of-type(13):after {    content: "\a";   white-space: pre;    border: 10px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div class="row center">    <button ng-repeat="letter in alphabet" class="button-alphabet">{{letter.name}}</button>  </div>

i've tried setting buttons on inline , using :after selector force line break after 13th element, no luck far.

with javascript desired result, i'm having index issue. when select upper 'b', letter 'o' beneath it, selected also. share same index in array

http://plnkr.co/edit/ima2dvxesxvnpfljesaf

tried searching topics, couldn't come solution,. able programmatically split array 2 rows? achieve css alone? or should stick javscript? appreciated.

can using ng-repeat-start , ng-repeat-end add block element separator

html

<button ng-repeat-start="letter in alphabet" ...>{{letter.name}}</button> <div ng-repeat-end ng-if="$index==12" class="separator"></div> 

css

 .separator{     display:none;   }   @media screen , (max-width:700px){     .separator{                 display:block;     }   } 

demo