Currently, we are striving to create a layout that resembles this design. However, I am facing difficulties in making it responsive. Can anyone offer some guidance?
Should we solely incorporate col-* classes? Additionally, we are restricted from setting specific heights because we are aiming for a puzzle-like appearance.
<section class="books-wrapper">
<div class="container">
<h2>Bestsellers</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 at 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>A Hologram for the King</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>
<!-- Additional book entries follow... -->
</div>
</div>
// CSS Styles
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; }
// More CSS styles can be added here