I have a setup with two divs.
The initial div consists of a header bar containing navigation links and a logo. Directly below is the second div, which features a hero image accompanied by some text.
These divs are nested within a header tag, with the first div overlapping the second.
My goal is for this overlapping to be maintained in desktop view, but for the second div to shift below the first on mobile devices like iPhones or Galaxies.
To achieve this, I am looking for a solution using Bootstrap. Bootstrap
Importantly, I do not want the divs to appear side by side under any circumstances.
<div class="page-header-bar is-fixed ">
<div class="header-bar header-bar-primary " id="header-bar">
<div class="container header-bar-container" id="headerBar">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler"type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="navbar-nav">
<li class="nav-item">Link 1
</li>
<li class="nav-item">Link 2
</li>
<li class="nav-item">
Link 3
</li>
<li class="nav-item">Link 4
</li>
</ul>
</div>
</nav>
</div>
</div>
and here's the code for the second div:
<div class="section">
<div class="hero ">
<div class="hero-image-wrapper ">
<picture>
<img src="/aPicture.jpg" alt="Teaser" width="100%" height="100%">
</picture>
</div>
</div>