I'm struggling with bootstrap responsiveness. I have four items aligned to the right of an image (a title section and 3 items). Currently, it works fine on large screens but on small screens, all the items and the title go down. However, I want to keep just the title section on the right of the image and have the other 3 items drop below. Here is the CSS code I've tried:
@media (min-width: 576px) {
img {
width: 100%;
}
.title {
text-align: left;
width: 100%;
}
.item .item-icon {
float: left;
font-size: 40px;
width: 50px;
height: 50px;
}
.item .item-content {
float: right;
text-align: left;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- fontawesome -->
<script
src="https://kit.fontawesome.com/24734ac872.js"
crossorigin="anonymous"
></script>
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<!-- style -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/300" />
</div>
<div class="col-md-6">
<div class="row">
<div class="title text-center">
<h1>About me?</h1>
<p>things about me...</p>
</div>
</div>
<div class="row">
<div class="item">
<div class="item-icon">
<i class="fas fa-heart"></i>
</div>
<div class="item-content">
<h1>Thing 1</h1>
<p>About thing 1...</p>
</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="item-icon">
<i class="fas fa-heart"></i>
</div>
<div class="item-content">
<h1>Thing 2</h1>
<p>About thing 2...</p>
</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="item-icon">
<i class="fas fa-heart"></i>
</div>
<div class="item-content">
<h1>Thing 3</h1>
<p>About thing 3...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<!-- bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>The desired result should look like this:
https://i.sstatic.net/vnOMo.png
Gif:
https://i.sstatic.net/G9DcF.gif
Thanks!