Bootstrap grid with collapsed container in between

Question

It\'s my very first question here and i hope you can help me. I\'m trying to set up a product-overview page with the bootstrap grid. I have got 4 products in a row for large

Answer 1

A while back, I answered a similar question here: Bootstrap responsive grid layout (3 columns) with collapsed/hidden col-12 beneath each grid element

Basically you have to put the collapsed rows below the appropriate col-* to fit your smallest layout. So in your case:

  

            

                
            
            

                
            
            

                1
            
            

                2
            
            

                
            
            

                
            
            

               3
            
            

               4
            
   

And then you'd need some extra CSS to overlay the collapse column so that it's full width under the entire row on larger screens.

Demo: http://www.codeply.com/go/0QGguzIYCx

For Bootstrap 4, this scenario is easier because of flexbox ordering.. http://codeply.com/go/qdUGPVL4HJ (alpha 6)

http://codeply.com/go/TLJi5MxQ1E (Bootstrap 4.0.0)
http://codeply.com/go/EsRR1nGa36 (Bootstrap 4.3.0)

---

It's also possible to use jQuery/JS to handle the ordering logic: https://codeply.com/p/Fs1zOQCk1q