Layout,flex,media queries

Frage aus den Chat. Ich habe 4 Container die 2 x 2 angeordnet sind Wie kann man das machen das ein an einer Größe von 750 Pixel die Container neben einander liegen und unter kleiner als 750 Pixel sollen sie übereinander liegen. Die Containersoll immer den ganzen Bilschirm ausfüllen

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <!DOCTYPE html><html lang="en" dir="ltr">  
  <head>    
    <meta charset="utf-8">    
    <title></title>   
    <style>
     body{
  margin: 0px;
  padding: 0px;
}
header{
  height:auto;
  background:red;
  color:white;
  font-size:100%;
}
 #headmitte> img{
  height:100px;
   width:50%;
  margin:20px 0 0 20px;
  padding:0;
}
main{
  max-width: 1500px;
    display: flex;
    flex-direction: column;
}
.line1,.line2{
    display:flex;
    flex-direction:row;
}
.element{
 flex:1;
  margin: 1%;
  max-width:750px;
  background-color: lightblue;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX