Salve ragazzi devo posizionare 4 div 2 sopra e 2 sotto , sono alle prime armi e nn riesco a capire come fare vi posto il codice

codice HTML:
 [...]
         <div id="App1" class="App1"> app1 </div>
         <div id="App2" class="App2"> app2 </div>
         <div id="App3" class="App3"> app3 </div>
         <div id="App4" class="App4"> app4 </div>
[...]
codice:
.App1{
    
         border: thin solid;
      border-color: yellowgreen; 
      width: 15%;
      height:25%;
      margin-left: 5%;
      margin-right: :5%;
      margin-top: 6%; 
      float: left;     
      border-radius: 10px; auto; 
       
}




.App2{
       
       border: thin solid;
       border-color: bisque;
    
       width: 15%;
       height:25%; 
       margin-right: :5%;
       margin-left: 5%;
       margin-top: 6%; 
       float: left;
       border-radius: 10px; auto;
 
}

.App3{
       position: static;
       border: thin solid;
       border-color: beige;     
       width: 15%;
       height:25%;
       margin-right: 5%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
}



.App4{
      
       border: thin solid;
       border-color: black;
 
       width: 15%;
       height:25%;
       margin-left: 5%;
       margin-top: 6%;  
       float: left;
       border-radius: 10px; auto;
       
}
cosi sono posizionati uno di seguito all'altro devo fare scendere app3 e app4 in questo modo:

app1 app2

app3 app4

spero di aver reso l'idea