Two DIVs overlapping and below each other in mobile mode in bootstrap

Question

I have two divs.

The first is a header bar with navigation and a logo. Below that I have a hero image with some text.

The first div overlaps the second. Both the divs are inside a header tag.

What I want is that in desktop mode this overlapping will stay as it is. But that when I have a mobile device such as iPhone or Galaxy, then the second div will be placed below the first div.

The solution should be in bootstrap. Bootstrap

Under no circumstances do I want the divs to be side by side.

  <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 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>

Answer 1

You could use a real HTML <section> rather than having a div with class="section".

Then make your image a background of the <section>. Most usually a section is full width unless you specify otherwise so your hero image should always remain full width with a little CSS help.

Then put as much content as you want inside the section, this can be orgabnised in any way you see fit.

Your image will always be in the background.

HTML

<section id="hero">
    <div class="row">
       <div class="col">
           <!-- All your hero wording -->
       </div>
    </div>
</section>

CSS

#hero{
 background: url(/aPicture.jpg) 50% 50% no-repeat;
 background-size: cover;
}