How to force the content of the div to display below of the background image in the mobile device?

Question

I have two rows of background image and content. Both are displaying properly on the desktop. I need to display in a single column on the mobile device. I am confused what should I use on the mobile device. Please check out the images.

Would you help me out in this?

I am getting the output in the desktop

I need a output in the mobile device

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.inner_padding {
  box-sizing: border-box;
  padding: 0 20px;
}

.example1_bg {
  background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}

.banner_bg {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-position: center;
  position: relative;
}

.example_part {
  position: absolute;
  right: 50px;
  top: 11%;
  margin-top: auto;
  margin-bottom: auto;
}

.note_part {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 470px;
  box-sizing: border-box;
  padding: 25px;
}

.const_part {
  position: absolute;
  left: 50px;
  top: 15%;
}

.example1_bg .h_title h2 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 35px;
  margin-top: 14px;
  font-family: "Walsheim-Regular";
}

.h_title h2:after {
  content: '';
  border-bottom: 2px solid #E43D32;
  content: ' ';
  position: absolute;
  display: block;
  width: 60px;
  padding-top: 10px;
}

.repair_conent_title,
.repair_conent_text {
  padding: 0 70px 0 20px;
}

.h_content p {
  font-size: 18px;
}

<div class="example1_bg  banner_bg">
  <div class="example_part note_part">
    <div class="inner_padding">
      <div class="h_title">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
      </div>
      <div class="h_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="btn_know_more">
          <a href="#">Know more</a>
        </div>
      </div>
      <!--h_content-->
    </div>
  </div>
  <!--example_part-->
</div>
<!--example1_bg-->



<div class="example1_bg banner_bg">
  <div class="const_part note_part">
    <div class="inner_padding">
      <div class="h_title">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
      </div>
      <div class="h_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="btn_know_more">
          <a href="#">Know more</a>
        </div>
      </div>
      <!--h_content-->
    </div>
  </div>
  <!--example_part-->
</div>
<!--example1_bg-->

Answer 1

Im not at my pc atm. I'm sure I have code for this. But w3school has good examples in a css3 tag https://www.w3schools.com/css/css3_flexbox.asp

You could wrap them individually in a div. So background and content in their own div. Then same again for the other two. And have both background and content divs float left. Then set the container div to margin-left: 0 auto, and margin-right: 0 auto.

Or in an code

<div class="container">
   <div class="background"></div>
   <div class="content"></div>
</div>


   .container{ margin-right:auto;
               margin-left:auto;
               height: 1%;
               overflow: hidden;
            } 

   .background { display: table; 
                 margin: 0 auto; 
                 widht:400px; 
                 Height: 500px ;
              }

.content { display: table; 
                 margin: 0 auto; 
                 widht:400px; 
                 Height: 500px ;
              }

Answer 2

You need to change your structure for it so it works well as you desire and you will require media queries as well.

• Wrap both the content as siblings instead of parent and child inside a super class (container) as shown.
• Initially since they have absolute positioning with respect to container, they'll show as expected.

• When the screen is resized use media query as such and change the position to relative. (Setting to relative allows them to have their natural behaviour and not overlap and you can adjust the top,left,bottom,right positioning as required)

  @media only screen and (max-width:600px) { .banner_bg { position: relative; min-height: 300px; width: 100%; } .example_part { position: relative; width: 100%; left: 0; top: 0; } .const_part { position: relative; width: 100%; left: 0; top: 0; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.inner_padding {
  box-sizing: border-box;
  padding: 0 20px;
}

.container {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
}

.example1_bg {
  background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}

.banner_bg {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-position: center;
  position: absolute;
}

.example_part {
  position: absolute;
  right: 50px;
  top: 11%;
  margin-top: auto;
  margin-bottom: auto;
}

.note_part {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 470px;
  box-sizing: border-box;
  padding: 25px;
}

.const_part {
  position: absolute;
  left: 50px;
  top: 15%;
}

.example1_bg .h_title h2 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 35px;
  margin-top: 14px;
  font-family: "Walsheim-Regular";
}

.h_title h2:after {
  content: '';
  border-bottom: 2px solid #E43D32;
  content: ' ';
  position: absolute;
  display: block;
  width: 60px;
  padding-top: 10px;
}

.repair_conent_title,
.repair_conent_text {
  padding: 0 70px 0 20px;
}

.h_content p {
  font-size: 18px;
}

@media only screen and (max-width:700px) {
  .banner_bg {
    position: relative;
    min-height: 300px;
    width: 100%;
  }
  .example_part {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
  }
  .const_part {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
  }
}

<div class="container">
  <div class="example1_bg  banner_bg">
  </div>
  <!--example1_bg-->
  <div class="example_part note_part">
    <div class="inner_padding">
      <div class="h_title">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
      </div>
      <div class="h_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="btn_know_more">
          <a href="#">Know more</a>
        </div>
      </div>
      <!--h_content-->
    </div>
  </div>
  <!--example_part-->
</div>

<div class="container">
  <div class="example1_bg banner_bg">
  </div>
  <!--example1_bg-->
  <div class="const_part note_part">
    <div class="inner_padding">
      <div class="h_title">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
      </div>
      <div class="h_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="btn_know_more">
          <a href="#">Know more</a>
        </div>
      </div>
      <!--h_content-->
    </div>
  </div>
  <!--example_part-->
</div>