How to align divs based on responsive design

Question

I have some HTML and CSS code as shown below:

https://codepen.io/aspnetgal/pen/vaoNPz

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.adv-signup {position: relative; 
   background-image: linear-gradient( #fff, #eff1f1);
   
  width: 100%; height: 400px; }

	
.contents {position: absolute;  width: 1000px; 
 height: 200px; background-color:#2183c2;

}
.contents .bg{
 
  background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
   margin:0;
}
.text{
  
   font-family: "Ubuntu"; 
    font-weight: light;
    color:white;
 
     }

.text h3{
 font-weight: bold;
 }
.controls
{
  
}

 .btn
{
  background: #0c5382;
  color:white;
 
}
h3,h1{
    padding: 0px;
    margin: 0px !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .adv-signup {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .contents {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .contents {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .contents {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .contents {background: pink;}
}

<div class="adv-signup">
   
        <div class="contents">
          <div class="bg">
                <h1>test</h1>
              </div>
           <div class="text">
                   <h3>Sign up for E-News</h3>
                <p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
            </div>

            <div class="controls">
                <input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
                <a href="#" class="btn"> &gt;</a>
            </div>
        </div>
<div>

For desktop, I want the div content which has text (heading and paragraph) and controls to be displayed in single line.

For tablet, I want the div content which has text (heading/paragragh vertically aligned) and controls to be displayed in a single line.

I want for a mobile the div content which has text heading, paragraph, and controls to be displayed in a vertical line.

Answer 1

backing Anji Response, you should write all your CSS under media queries. Below is the list of queries that you should minimum follow.

Min-width: 320px (smaller phone viewpoints) Min-width: 480px (small devices and most phones) Min-width: 768px (most tablets) Min-width: 992px (smaller desktop viewpoints) Min-width: 1200px (large devices and wide screens)

Note:- Setting with JS is anyway a costly JOB!!!

Answer 2

Updated js fiddle. https://codepen.io/anon/pen/BPXbjx

you need to add the below code.

.contents{
  display:flex;
}
@media (max-width:767px){
  .contents{
    display:block;
  }
}

I hope you can do the remaining styles.