how to structure html to take advantage of media queries [closed]

I’m trying to design a registration page that will work on both a desktop and mobile phone. To register I need 6 items. I would like to have on the desktop 3 lines with 2 items on each line. On mobile I want to create 2 groups each with 3 lines, 1 item on each line. I will want to add back and next button for the mobile site to go between the two groups.

I can do this by creating two different sets of html (see snippet) but would like to see if there’s a way to do this with one set of html and then just media quires to transform. I’m ok with changing the html but I want to achieve the indicated result.

const wrap1 = document.getElementById('wrap1')  
const wrap2 = document.getElementById('wrap2')   

function next(){   
   wrap1.classList.add('hide')
   wrap2.classList.remove('hide')   
}

function back(){   
   wrap2.classList.add('hide')
   wrap1.classList.remove('hide')   
}

#one{
display:flex;
flex-direction:column;
align-items:center;
border:solid 1px green;
}

.done{
display:flex;
margin:2% 0;
}

.ione{
margin:0 2%;}

h3{
text-align:center;
}

#two{
margin-top:10%;
border:solid 1px green;}

.dtwo{
display:flex;
flex-direction:column;
align-items:center;
margin-top:5%;


}

.itwo{
width:50%;
margin:2% 0;
}

button{
display:block;
margin:0 auto;}

.hide{
display:none;}

<h3> how to convert the first form to the second form</h3>

<form id='one'>
   <div class='done'>
      <input class='ione' type='text' placeholder='first name'>
      <input class='ione'  type='text' placeholder='last name'>
   </div>
   <div class='done'>
      <input class='ione'  type='tel' placeholder='phone number'>
      <input class='ione'  type='email' placeholder='email'>
   </div>
   <div class='done'>
      <input class='ione'  type='password' placeholder='password'>
      <input class='ione'  type='password' placeholder='confirm password'>
    </div>
</form>


<form id='two'>
   <div id='wrap1'>
      <div class='dtwo'>
        <input class='itwo' type='text' placeholder='first name'>
        <input class='itwo'  type='text' placeholder='last name'>   
        <input class='itwo'  type='tel' placeholder='phone number'>
      </div>
      <button type="button" onclick="next()">NEXT</button>
   </div>
   <div id='wrap2' class='hide'>
      <div class='dtwo'>
        <input class='itwo'  type='email' placeholder='email'>
        <input class='itwo'  type='password' placeholder='password'>
        <input class='itwo'  type='password' placeholder='confirm password'>
      </div>
      <button type="button" onclick="back()">BACK</button>
   </div>
    
</form>

Answer

I may be missing something vital but it seem You can keep the layout as you have and simply hide one form and show the other depending on the @media screen and (max-width: XXXpx) where XXX is where you want your breakpoints to be.

Let’s say you decide to go for 600px of width:

form#two{
   display:none //hide form two 
}
@media screen and (max-width: 600px){
   form#two{
      display:flex; //show form two on screen sizes with width <=600px
      //I'm setting display as flex, since that is what
      //you have it to show as in your example
   }
   form#one{
      display:none; //hide form one
   }
}

If you want to simplify the layout, but do not mind changing pretty much everything else, you can try hiding and showing only what you need in that form.

One example of how you might be able to do that would be the following:

var group1 = document.getElementsByClassName("group-1");
  var group2 = document.getElementsByClassName("group-2");
  function next(){
    for (var i = 0; i < group1.length; i++) {
      group1[i].classList.add('sm-hide');
    }
    for (var i = 0; i < group2.length; i++) {
      group2[i].classList.remove('sm-hide');
    }
  }
  function back(){
    for (var i = 0; i < group1.length; i++) {
      group1[i].classList.remove('sm-hide');
    }
    for (var i = 0; i < group2.length; i++) {
      group2[i].classList.add('sm-hide');
    }
  }

    form{
      display: flex;
      flex-wrap: wrap;
    }
    form > div{
      width:50%;
      background:#333;
    }
    .btn-back,.btn-next{
      display: none;
    }
    @media screen and (max-width: 600px){
      form > div{
        width:100%;
      }
      .btn-back,.btn-next{
        display: block;
      }
      .sm-hide{
        display: none;
      }
    }

  <form id="form">
    <div class="input group-1"><input type="text"></div>
    <div class="input group-1"><input type="text"></div>
    <div class="input group-1"><input type="text"></div>
    <button type="button" class="btn-next group-1" onclick="next()">Next</button>
    <div class="input sm-hide group-2"><input type="text"></div>
    <div class="input sm-hide group-2"><input type="text"></div>
    <div class="input sm-hide group-2"><input type="text"></div>
    <button type="button" class="btn-back sm-hide group-2" onclick="back()">Back</button>
  </form>

Of course you can add as much style as you want, this is only a simple layout suggestion, but again, there are multiple ways you can go around tackling this issue