Div Anordnung bei Veränderung der Bildschirmgröße

  • Hallo, ich habe vier Divs die immer zu zweit nebeneinander bzw. untereinander angeordnet werden sollen. Das ganze klappt auch ziemlich gut, bis man die Bildschirmgröße ändert. Wird der Bildschirm kleiner, so sollen die Divs nur noch untereinander angeordnet werden, dafür aber auf die gesamte Breite gestreckt werden und vor allem bei der mobilen Ansicht ist es wichtig, dass alles untereinander ist, da es sonst zu klein ist. Ich kriege das nur leider nicht hin.
    Der Code:
    HTML:


    CSS:

    HTML
    1. body{ margin: 0px; padding: 0px;}
    2. .main{ max-width: 1500px; margin: auto;}
    3. .element{ float:left; width: 48%; min-width: 410px; margin: 1%; margin-bottom: 0px; padding-bottom: 0px; background-color: lightblue;}
    4. .element img{ width: 100%;}
    5. .element .content { text-align: left; padding: 3%;}


    Ich lade nochmal das ganze Projekt hoch, falls jemand das ausprobieren will. Vielen Dank schon mal im voraus für die Hilfe!