Text Wrap Around Responsive Image - css

Question

Is there a way to have text wrap around a responsive image using the bootstrap grid layout? I am trying to avoid the use of media queries. This is essentially what I am going for :
I've tried a lot of different variations of rows and columns to get this to work. Perhaps I am being too stubborn and should just use media queries, but I thought maybe someone out there found a solution via bootstrap grid. Here is what I am currently working with.
<div class="container">
<div class="row">
<div class="col">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="row">
<div class="col-md-5 col-lg-4">
<img class="img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
</div>
<div class="col-md-6 col-lg-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
</p>
</div>
</div>
</div>

Answer 1

You can simply wrap the content with simple float:left
Try this.
.row .col-md-5{float:left;}
.row{max-width:550px;}/*optional*/
<div class="container">
<div class="row">
<div class="col">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="row">
<div class="col-md-5 col-lg-4">
<img class="img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
</div>
<div class="col-md-6 col-lg-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
</p>
</div>
</div>
</div>
PS: I set max-width just to make sure the content is wrapping.

Answer 2

You can make it single column instead of using two column. Bootstrap 4 default float-sm-left, pr-3, pb-3 class to align padding and floating the element. You can adjust the responsive by changing float-sm-left to float-md-left, float-lg-left, float-xl-left based on your requirement.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="img-fluid float-sm-left pr-3 pb-3" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
</p>
</div>
</div>
</div>

Answer 3

<style type="text/css">
#media only screen and (max-width:480px) {
img {
display:block;
float:none;
margin:0 auto 20px !important;
}
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body style="margin:0; background:#000;">
<div style="max-width:600px; margin:0 auto; background:#fff; overflow:hidden;">
<div style="Margin:20px;">
<img src="https://www.clipartqueen.com/image-files/small-face-silhouette.png" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;"/>
<p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Hic illum vitae iusto aspernatur tempora voluptatem id dolor reiciendis amet ea iste similique fuga, accusamus quibusdam, atque itaque quae sit dolorem asperiores facilis, fugit odio eveniet. Autem iusto nisi, minus sunt fuga quas sed expedita incidunt veniam nobis id ab. Blanditiis ullam laboriosam, quibusdam fugiat repellat labore nulla natus minima at, a veritatis nostrum dignissimos ipsa libero, voluptatem itaque!
</p>
</div>
</div>
</body>
</html>

Answer 4

You can use .float-left to make text wrap around the image:
.mw-25 {
max-width: 25%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="row">
<div class="col">
<div>
<img class="img float-left mw-25 border" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
<p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.Pellentesque viverra suscipit nibh, vitae laoreet diam semper non.</p>
<p>Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
<p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac.</p>
</div>
</div>
</div>
</div>