Eu tenho uma situação em que tenho uma lista de dados a serem exibidos em painéis individuais. Usando o sistema de grade do Bootstrap, eu gostaria de tirar proveito de uma tela ampla e exibir vários painéis horizontalmente, mas em telas estreitas eles os empilham. Atualmente, estou colocando as coisas no lado do servidor com ejs como este, com colunas sendo passadas como um parâmetro de consulta, normalmente definido como 2 ou 3, para que cada colClass seja col-sm-6 ou col-sm-4.

<% var colWidth = 12/columns; var colClass = "col-sm-" + colWidth; %>
<% for(var i=0; i<contestData.classData.length; i++) {%>
    <% if ((classCount % columns) == 0) { %>
        <div class="row">
    <% } %>
    <div class="<%= colClass %>">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"> <%= contestData.classData[i].name %> </h3>
            </div>
            <div>...</div>
        </div>
    </div>
    <% classCount++ %>
    <% if ((classCount % columns) == 0) { %>
        </div>
    <% } %>
<% } %>

Isso funciona, mas fazer esse nível de layout no lado do servidor me ofende; prefiro fazer isso com o Angular, mas não consigo descobrir como agrupar o número apropriado de painéis em uma div com class = row ao fazer ng -repeat ou até ng-repeat-start = "classData in contestData.classData"

Obrigado!