Expandable grid with full width expansion using Bootstrap 4

Question

I'm trying to make a grid for a gallery with an expanding preview, showing the details. I am using the code from this nice article: https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/ Everything works fine but I want to use Bootstrap 4 to make it responsive. The problem I'm facing is that the expansion is now inside the column, making it the same width instead of the full page width. Is there a way to make it full width or place the expansion outside the column?

<section class="films">
    <div class="container-fluid"> 
        <div id="og-grid" class="og-grid row">
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
        </div>
     </div>
</section>

The original CSS: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css

And JS: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js

Answer 1

The Codrops example is very complex, and it would be difficult to make responsive.

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. The jQuery/JS in this case is simpler, and aligns with Bootstraps's grid breakpoints. No extra CSS (beyond Bootstrap) is needed...

// 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

---

Also see: Bootstrap Expanding Grid