Bilderbox mit Flex
Hallo zusammen,
ich bräuchte mal ein bisschen Hilfe. Ich habe eine Imagebox (imgBX) gebaut, in der nebeneinander 3 Karten (card) angeordnet sein sollen und dann ein Umbruch in die nächste Zeile erfolgen soll. Dort wieder 3 Karten usw. Bei voller Bildschirmbreite sollen box1 und Details nebeneinander angeordnet sein.
Bei Bildschirmbreite 600px und kleiner sind die Karten vertikal angeordnet und die box1 steht über Details.
Meinen bisheriger Versuch habe ich auf Codepen gestellt. Kann mir jemand weiter helfen? Danke!
https://codepen.io/Lupus_III/project/editor/AVmzry
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My New Pen!</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
body {
background: #f5f5f5;
}
section {
padding: 0.5em;
display: flex;
flex-direction: row;
}
article {
background: red;
color: white;
flex: 8;
padding: 0.5em;
border: solid 1px #000;
margin: 0 .5em;
}
aside {
background: yellow;
color: #000;
flex: 4;
padding: 0.5em;
border: solid 1px #000;
}
.imgBx {
width: 100%;