Conditionally starting and ending a div using each helper - ember.js

Question

I am using bootstrap and need to conditionally start a <div class="row"> depending on the index of the item; in this case, each row has two items.
{{#each items as |item index|}}
{{#if item.isStartRow}}
<div class="row">
{{/if}}
...my code here
{{#if item.isEndRow}}
</div>
{{/if}}
{{/each}}
The trouble is that the HTMLBars validates the div has a starting and ending tag, therefore the above will not work. Can anyone suggest a workaround?
The end result would look something like this if there were 6 items in the array:
<div class="row">
<div class="col-md-6">Item 1...</div>
<div class="col-md-6">Item 2...</div>
</div>
<div class="row">
<div class="col-md-6">Item 3...</div>
<div class="col-md-6">Item 4...</div>
</div>
<div class="row">
<div class="col-md-6">Item 5...</div>
<div class="col-md-6">Item 6...</div>
</div>

Answer 1

It's turned out to be a different scenario once you've updated the question, and this is how I'd approach this
<script type="text/x-handlebars" data-template-name="components/item-row">
{{#each chunks as |chunk|}}
<div class="row">
{{#each chunk as |item|}}
<div class="col-md-6">{{item}}</div>
{{/each}}
</div>
{{/each}}
</script>
JS Component class
App.ItemRowComponent = Ember.Component.extend({
chunks : function(){
var items = this.get('rows.[]').slice(0); // make a copy
var count = Math.ceil(items.get('length')/2);
var chunks = [];
for(var i = 0 ; i < count ; i++){
chunks.push(items.splice(0,2));
}
return chunks;
}.property('rows.[]')
});
DEMO
You are free to customize child element if you make it as another component. It's an added flexibility.