<div class="container">
  
  <h1>Responsive Image Gallery with Bootstrap 4 Flexbox</h1>
  <div class="d-flex flex-row flex-wrap">
 <picture>
  <source media="(min-width: 650px)" srcset="https://dummyimage.com/1200x600/ccc/000&text=A">
  <img src="https://dummyimage.com/600x300/ccc/000&text=A" alt="placeholder image"  class="img-fluid">
</picture>
    
     <picture>
  <source media="(min-width: 650px)" srcset="https://dummyimage.com/1200x600/999/000&text=B">
  <img src="https://dummyimage.com/600x300/999/000&text=B" alt="placeholder image"  class="img-fluid">
</picture>
    
 <picture>
  <source media="(min-width: 650px)" srcset="https://dummyimage.com/1200x600/ccc/000&text=C">
  <img src="https://dummyimage.com/600x300/ccc/000&text=C" alt="placeholder image"  class="img-fluid">
</picture>
    

    
     <picture class="w-lg-50">
  <source media="(min-width: 650px)" srcset="https://dummyimage.com/1200x600/999/000&text=D">
  <img src="https://dummyimage.com/600x300/999/000&text=D" alt="placeholder image"  class="img-fluid">
</picture>
    
     <picture class="w-lg-50">
  <source media="(min-width: 650px)" srcset="https://dummyimage.com/1200x600/ccc/000&text=E">
  <img src="https://dummyimage.com/600x300/999/000&text=E" alt="placeholder image"  class="img-fluid">
</picture>
    
     <picture>
  <source media="(min-width: 650px)" srcset="https://dummyimage.com/1200x600/999/000&text=F">
  <img src="https://dummyimage.com/600x300/999/000&text=F" alt="placeholder image"  class="img-fluid">
</picture>
    

    

    
    


  </div>
</div>
  



.d-flex {
  border:2px solid #000;
}
.d-flex picture {
  width:300px;
  flex: auto;
  cursor:pointer;
  border:2px solid #000;

}

@media (min-width: 992px) { 
  .w-lg-50 {width:50%!important;}
}










/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  

}

/* Medium devices (tablets, 768px and up) 
The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}



/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

@media (max-width: 950px) { 

}
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
  
  
// document ready  
});


window.onload = function() {
 // executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
  
  
// window load  
};


External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js