Is it possible to create a responsive design using Bootstrap 3 panel along with a floating image positioned next to it? I want the panel to seamlessly fit into the available space, without overlapping the image. Can anyone provide guidance on achieving this?
Here is an example:
<body>
<div class="row">
<div class="col-md-12 padding-top-40">
<img src="https://images.pexels.com/photos/34299/herbs-flavoring-seasoning-cooking.jpg" class="float-img">
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</p>
<h2>Don't leave me hanging</h2>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</p>
<div class="panel panel-danger">
<div class="panel-body">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<br>
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div class="panel-footer">
<a class="btn btn-danger btn-lg btn-block" href="#">
<i class="fas fa-user-circle"></i> Register
</a>
</div>
</div>
</div>
</div>
</body>
<style>
body {
width: 1100px;
}
.float-img {
float: right;
width: 500px;
}
</style>