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:

  <div class="row">
            <div class="col-md-3 col-xs-6">
                <a href="#one" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-md-3 col-xs-6">
                <a href="#two" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-xs-12 overlay collapse" id="one">
                1
            </div>
            <div class="col-xs-12 overlay collapse" id="two">
                2
            </div>
            <div class="col-md-3 col-xs-6">
                <a href="#three" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-md-3 col-xs-6">
                <a href="#four" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-xs-12 overlay collapse" id="three">
               3
            </div>
            <div class="col-xs-12 overlay collapse" id="four">
               4
            </div>
   </div>

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