Отображение данных в строке в столбце 1, затем в строках в столбце 2 и т. д.

Во-первых, я нашел это решение (ColdFusion — отображение строк в виде столбцов), которое БУДЕТ исправить мой проблема, если бы я мог использовать table, но я не могу, так как это должно быть отзывчивым. Однако клиенту не понравились адаптивные таблицы. Они действительно, действительно предпочли бы, чтобы столбцы отображались так, чтобы пользователю нужно было только прокручивать вверх и вниз, а не вверх вниз и вбок, чтобы сторона.

Мне нужна помощь в преобразовании таблицы в bootstrap <div>. Я знаю основы: пропускаем стол, tr равняется div class="row", а td равняется div class="col-sm-*" вещам. Однако, более конкретно, я не уверен в логике, которую следует использовать для преобразования решения SO, приведенного выше, и в том, как применить его к моим потребностям.

Используя Lucee вместе с Bootstrap v3, я пытаюсь заполнить «сетку», но мне нужно заполнить строки в столбце1 перед заполнением столбца2.

1|10|20|30|40  
2|11|21|31|41  
3|12|22|32|42  
4|13|23|33|43

Приведенный ниже фрагмент кода принадлежит @travis, и я не беру на себя ответственность за него

<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">  
<!--- loop through the rows.  This loop will run 3 times in this example --->
    <cfloop from = "1" to = "#totalRows#" index = "thisRow">
    <tr>
        <!--- this loop will run 5 times in times in this example --->
        <cfloop from = "1" to = "#cols#" index = "thisCol">
        <!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->
        <td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
            <!--- Check current record with the record count, this will be used to display data or an empty cell --->
            <cfif output lte qMyQuery.recordCount>
                <cfoutput>#qMyQuery.Mon[output]#</cfoutput>
            <cfelse>
            <!--- use <br> to display an empty cell --->
                <br>
            </cfif>
            <!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
            <cfset output = output + totalRows>
        </td>
        </cfloop>
        <!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->
        <cfset output = thisRow + 1>
    </tr>
    </cfloop>
</table>

и это моя попытка сделать то же самое с помощью бутстрапа:

<!-- what I'm working with -->
<cfset cols = 2>
<!-- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows-->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<div class="row">
    <div class="col-sm-12">
    <!--- loop through the rows.  This loop will run 3 times in this example --->
        <cfloop from = "1" to = "#totalRows#" index = "thisRow">
            <div class="row">
                <!--- this loop will run 5 times in this example --->
                <cfloop from = "1" to = "#cols#" index = "thisCol">
                    <div class="col-xs-3" style="border:1px solid red">
                        <cfif output lte qMyQuery.recordCount>
                            <cfoutput>#qMyQuery.mon[output]#</cfoutput>
                        <cfelse>
                            <br>
                        </cfif>
                        <cfset output = output + totalRows>
                    </div>
                </cfloop>
                <cfset output = thisRow + 1>
            </div>
        </cfloop>
    </div>
</div>

Тем не менее, вывод моей работы просто отображает все на одной странице полной ширины (встроенный стиль границы: 1px сплошной красный цвет позволяет увидеть, что производит код). Хотя это для ColdFusion, я полагаю, что логика цикла будет такой же для PHP.

Любые советы, хитрости, советы или, желательно, решения для этого?