Bootstrap 4 colonne grid - responsivity

Question

Nous essayons d'obtenir la mise en page comme ça ... le problème est que je ne suis pas en mesure de le rendre réactif, quelqu'un peut-il me donner un indice?

Devrions-nous simplement ajouter des classes col- *? nous ne pouvons pas non plus définir une hauteur spécifique, car il doit ressembler à "un puzzle".

https://codepen.io/anon/pen/mmZqyg

<section class="books-wrapper"> 
<div class="container"> 
    <h2>Bestsellery</h2> 
    <div class="books"> 
     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/1.png" alt=""> 
      <div class="info"> 
       <img src="img/icon/star.png" alt=""> 
      </div> 
      <div class="title"> 
       <h3>Kruh</h3> 
       <h4>Dave Eggers</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/8.png" alt=""> 
      <div class="title"> 
       <h3>Supergirl na Super Hero High</h3> 
       <h4>Lisa Yee</h4> 

      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/2.png" alt=""> 
      <div class="info"> 
       Bestseller 
      </div> 
      <div class="title"> 
       <h3>Hologram pro krále</h3> 
       <h4>Dave Eggers</h4> 
      </div> 
      <a class="price" class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 289 
       Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/9.png" alt=""> 
      <div class="title"> 
       <h3>Jim Sekáč: Syn pana Zubatého</h3> 
       <h4>Dave Eggers</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 289 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/3.png" alt=""> 
      <div class="title"> 
       <h3>Kapitán Flint je zase in</h3> 
       <h4>Torsten Wohlleben,</h4> 
       <h4>Jutta Wetzel</h4> 
      </div> 
      <a class="price" class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 
       Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/10.png" alt=""> 

      <div class="title"> 
       <h3>Kapitán Flint je zase in</h3> 
       <h4>Torsten Wohlleben,</h4> 
       <h4>Jutta Wetzel</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/4.png" alt=""> 
      <div class="info"> 
       -50% 
      </div> 
      <div class="title"> 
       <h3>Klářin velký závod</h3> 
       <h4>Pia Hagmarová</h4> 
      </div> 
      <a class="price sale" href="#"><span>498 Kč</span><i class="fa fa-shopping-cart" aria-hidden="true"></i> 
       199 Kč</a> 
     </div> 
     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/11.png" alt=""> 
      <div class="info"> 
       -50% 
      </div> 
      <div class="title"> 
       <h3>Klářin velký závod</h3> 
       <h4>Pia Hagmarová</h4> 
      </div> 
      <a class="price sale" href="#"><span>498 Kč</span><i class="fa fa-shopping-cart" aria-hidden="true"></i> 
       199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/5.png" alt=""> 

      <div class="title"> 
       <h3>Rekviem za Pluto</h3> 
       <h4> Adam Chromý</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/12.png" alt=""> 

      <div class="title"> 
       <h3>Rekviem za Pluto</h3> 
       <h4>Adam Chromý</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/6.png" alt=""> 

      <div class="title"> 
       <h3>Chlapec z kociek</h3> 
       <h4>Keith Stuart</h4> 
      </div> 
      <a class="price in-cart" href="#"> 
       <i class="fa fa-shopping-cart" aria-hidden="true"></i><i class="fa fa-check" aria-hidden="true"></i> 
       209 Kč 
      </a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/13.png" alt=""> 

      <div class="title"> 
       <h3>Chlapec z kociek</h3> 
       <h4>Keith Stuart</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 209 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/7.png" alt=""> 
      <div class="info"> 
       <img src="img/icon/star.png" alt=""> 
      </div> 
      <div class="title"> 
       <h3>V pavoučí síti</h3> 
       <h4>Jakub Hrdoun</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/14.png" alt=""> 
      <div class="info"> 
       <img src="img/icon/star.png" alt=""> 
      </div> 
      <div class="title"> 
       <h3>V pavoučí síti</h3> 
       <h4>Jakub Hrdoun</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 
    </div> 
</div> 

section.books-wrapper a.next { 
    position: absolute; 
    bottom: 0px; 
    right: 70px; 
    background-color: #c40058; 
    color: #ffffff; 
    text-transform: uppercase; 
    width: 220px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; } 
section.books-wrapper .books { 
    position: relative; 
    -webkit-column-count: 7; 
    -moz-column-count: 7; 
    column-count: 7; 
    -webkit-column-gap: 1.25rem; 
    -moz-column-gap: 1.25rem; 
    column-gap: 1.25rem; 
    margin-top: 30px; 
    margin-bottom: 30px; } 
    section.books-wrapper .books .bok { 
    letter-spacing: normal; 
    width: 220px; 
    margin-bottom: 40px; 
    display: inline-block; 
    -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15); 
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15); } 
    section.books-wrapper .books .bok .info { 
     height: 40px; 
     background-color: #393e4c; 
     font-size: 20px; 
     font-family: rubik-bold; 
     line-height: 45px; 
     vertical-align: middle; 
     padding-left: 20px; 
     color: #ffffff; } 
     section.books-wrapper .books .bok .info img { 
     margin-top: 11px; } 
    section.books-wrapper .books .bok .title { 
     background-color: #f8f9fb; 
     padding: 20px; } 
     section.books-wrapper .books .bok .title h3 { 
     font-size: 20px; 
     font-family: rubik-medium; 
     text-transform: uppercase; 
     font-weight: normal; 
     margin: 0px; 
     padding: 0px; } 
     section.books-wrapper .books .bok .title h4 { 
     font-size: 12px; 
     font-family: rubik-regular; 
     font-weight: normal; 
     margin: 0px; 
     padding: 0px; 
     padding-top: 7px; } 
    section.books-wrapper .books .bok a.price { 
     font-size: 30px; 
     color: #36383f; 
     font-family: rubik-medium; 
     text-decoration: underline; 
     display: block; 
     text-align: right; 
     padding-top: 10px; 
     padding-right: 15px; 
     padding-bottom: 5px; } 
     section.books-wrapper .books .bok a.price i.fa { 
     font-size: 20px; 
     margin-right: 10px; } 
     section.books-wrapper .books .bok a.price span:before { 
     text-decoration: none; } 
    section.books-wrapper .books .bok a.price.sale { 
     text-decoration: line-through; } 
     section.books-wrapper .books .bok a.price.sale span { 
     font-size: 15px; 
     font-family: rubik-regular; 
     padding-right: 15px; } 
    section.books-wrapper .books .bok a.price.in-cart { 
     color: #c40058; } 
     section.books-wrapper .books .bok a.price.in-cart i.fa { 
     margin: 0px; } 
     section.books-wrapper .books .bok a.price.in-cart i.fa.fa-check { 
     padding-left: 20%; 
     font-size: 24px; } 

Answer 1

ajouter css

@media only screen and (max-width: 1670px) { 
      .books{ 
      -webkit-column-count: 6!important; 
      -moz-column-count: 6!important; 
      column-count: 6!important; 
      } 
     } 
     @media only screen and (max-width: 1450px) { 
      .books{ 
      -webkit-column-count: 5!important; 
      -moz-column-count: 5!important; 
      column-count: 5!important; 
      } 
     } 
     @media only screen and (max-width: 1250px) { 
      .books{ 
      -webkit-column-count: 4!important; 
      -moz-column-count: 4!important; 
      column-count: 4!important; 
      } 
     } 
     @media only screen and (max-width: 1000px) { 
      .books{ 
      -webkit-column-count: 3!important; 
      -moz-column-count: 3!important; 
      column-count: 3!important; 
      } 
     } 
     @media only screen and (max-width: 765px) { 
      .books{ 
      -webkit-column-count: 2!important; 
      -moz-column-count: 2!important; 
      column-count: 2!important; 
      } 
     } 
     @media only screen and (max-width: 550px) { 
      .books{ 
      -webkit-column-count: 1!important; 
      -moz-column-count: 1!important; 
      column-count: 1!important; 
      margin: auto; 
      width: 220px; 
      margin-top: 40px; 
      } 
     } 

Answer 2

Ajouter la sous-classe "blk" à tous comme dans votre code et aussi la requête des médias suivants dans css; ici la valeur de largeur maximum dépend de votre condition.

@media only screen and (max-width: 1024px){ 
 
    .blk {width: 100%}; 
 
}

<div class="bok blk"> 
 
    
 
</div>

}}