The Codrops example is very complex, and it would be difficult to make responsive.(Codrops示例非常复杂，很难做出响应。)
Since you want to use Bootstrap's responsiveness, you could instead use the Collapse component along with some JS logic to order the details column as desired.(由于要使用Bootstrap的响应能力，因此可以改用Collapse组件以及一些JS逻辑来按需对详细信息列进行排序。) The jQuery/JS in this case is simpler, and aligns with Bootstraps's grid breakpoints.(在这种情况下，jQuery / JS更简单，并且与Bootstraps的网格断点保持一致。) No extra CSS (beyond Bootstrap) is needed...(不需要额外的CSS（超越Bootstrap）...)
// initialize all cols with their natural order
$('.col-md-2').each(function(i,ele){
let idx = $(ele).index('.col-md-2')
$(this).css('order',idx)
})
// set the flexbox order of the details col in each row
var calcOrder = function(perRow){
$('.collapse').each(function(i,ele){
var idx = $(ele).index('.collapse')
var modIdx = idx % perRow
var posi = parseInt((perRow-modIdx) + idx)
$(this).css('order',posi)
})
}
// determine number per row based on window width
var breakpoints = function(width) {
if (width >= 776) {
//md
calcOrder(6)
}
else if (width >= 567) {
//sm
calcOrder(3)
}
else {
//xs
calcOrder(2)
}
}
// reset order on window resize
$(window).on('resize', function(){
var win = $(this)
breakpoints(win.width())
})
Demo: https://codeply.com/p/Fs1zOQCk1q(演示： https ： //codeply.com/p/Fs1zOQCk1q)
Also see: Bootstrap Expanding Grid(另请参阅： Bootstrap扩展网格) 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
