How to align divs based on responsive design - html

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" />
>
</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.