<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tests</title>
<style>
.fixed-container {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
}
.fixed-container div {
width:150px;
height:100px;
background-color: grey;
color:white;
font-size:40px;
display:flex;
}
.fixed-container div p{
margin: auto;
}
.form-container form div {
display:flex;
}
.form-container form div input {
flex:1;
}
@media (min-width:900px){
.container, .container2{
display:flex;
//align-items: stretch;
justify-content:space-between;
}
.container2 .side-content {
display:flex;
flex-direction: column;
}
}
.container2 .main-content {
flex:1;
order:1;
background-color: beige;
}
.container2 .side-content {
flex:1;
order:2;
}
.container2 .side-content-2 {
background-color: red;
flex:1;
}
.container2 .side-content-1 {
background-color: green;
flex:1;
}
.container div {
flex-basis:30%;
box-sizing: border-box;
padding:10px;
background-color: beige;
}
</style>
</head>
<body>
<div class="container2">
<div class="main-content">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit ametm.</p>
</div>
<div class="side-content">
<div class="side-content-1">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit ametsollicitudin.</p>
</div>
<div class="side-content-2">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
<div class="fixed-container">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
<div><p>5</p></div>
<div><p>6</p></div>
</div>
<div class="form-container">
<form>
<div>
<label for="email">Email Address:</label>
<input id="email" type="text">
</div>
<div>
<label for="name">Name:</label>
<input id="name" type="text">
</div>
</form>
</div>
<div class="container">
<div class="main-content">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="side-content">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet</div>
<div class="side-content-1">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body>
</html>
