Grid is flying around on the responsive part - html

Question

I am struggling a lot with the responsive part of a page.
When I scale down to around 991 px, the book, and the headline text is flying around. Originally I used sm-hidden and sm-visible, because I would like that the text headline came first, and afterwords the picture of the book.
But how can I solve this? I am starting to run low on ideas how to make it fit, so the book is not going under the background picture when I reach around the 991 px. I would like that the headline and book img stayed inside the background picture.
I hope somebody can through the developer console see what is wrong here. My code until now looks like this:
<div class="background-image" #Html.Raw(topImageStyling)>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 img logo img-responsive">
<img src="https://www.site.dk/img/inovo-logo-white-small.png">
</div>
</div>
</div>
<div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4">
<img src="https://www.site.dk/img/landingpages/.png">
</div>
<div class="container col-sm-12 col-md-9 col-lg-8">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
<div class="col-sm-12 visible-sm visible-xs">
<img src="https://www.site.dk/img/landingpages/g.png">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 main-content" id="main-content">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("site")
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

So I think I might have found the solution to your problem. On line 3044 of your CSS, there is the img element. I simply added the following to your code:
img {
display: block;
max-width: 100%;
height: auto;
position: relative;
z-index: 1030;}
It works for screen sizes larger than the 960px range and acts up a little from the 760px-440px range. I figured all you have to do now is add a media query for the corresponding viewport widths. To explain the solution is simple. Within CSS all elements that are layered within the HTML document have a z-index that determines there position in the stack. From there, in order to get the z-index to respond, I set the position to relative for that img element. The z-index property only works when the position is set to something other than static which is the default value. I hope this helps! Let me know if you have any questions.