Flexbox: how to put another object here [duplicate] - html

Question

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I'm using display: flex; to create tiles view.
I'm trying to put the third picture under the second picture.
But, whenever I do it, the third picture went under the first picture and won't come under second picture,
#media screen and (min-width: 1000px) {
.main {
height:1800px;
width: 100%;
margin: 0px 0px 0px 0px;
position: relative;
z-index: 0;
}
.parallax {
/* The image used */
background-image: url("https://i.ibb.co/r272XPt/2019-2020.png");
/* Set a specific height */
min-height: 400px;
opacity: 60%;
filter: blur(2px);
-webkit-filter: blur(2px);
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.tiles{
position:relative;
top:100px;
width:90vw;
margin-left:5vw;
display: flex;
flex-wrap: wrap;
}
.chromebookHelpdesk img{
margin-left:5vw;
width:50vw;
display:block;
}
.subhelp{
height:25vw;
}
.subhelp img{
margin-left:5vw;
width:25vw;
display:block;
}
.studentsTour img{
margin-left:5vw;
width:20vw;
margin-top:5vw;
display:block;
}
#projects img {
text-align: center;
display: block;
width: 25vw;
margin: 20px;
}
.mission_logo {
width: 200px;
display: inline-block;
float: left;
text-align: center;
}
.mission {
text-align: center;
margin-top: 100px;
font-size: 20px;
}
.ingenuity {
color: #3cba54;
font-size: 60px !important;
}
.creativity {
color: #f4c20d;
font-size: 60px !important;
}
.innovation {
color: #db3236;
font-size: 60px !important;
}
}
#media only screen and (max-width: 1000px) {
.main {
height:2500px;
width: 100%;
margin: 0px 0px 0px 0px;
position: relative;
z-index: 0;
}
.parallax {
display: none;
}
.mission_logo {
width: 60vw;
text-align: center;
}
.mission {
text-align: center;
margin-top: 100px;
font-size: 15px;
}
.ingenuity {
color: #3cba54;
font-size: 40px !important;
}
.creativity {
color: #f4c20d;
font-size: 40px !important;
}
.innovation {
color: #db3236;
font-size: 40px !important;
}
}
.tiles h1 {
text-align: center;
font-size: 50px;
color: black;
}
.follow{
position:relative;
top:100px;
text-align:center;
border-radius: 50%;
background-color: #84e3ca;
width: 50vw;
height: 50vw;
margin-left: 25vw;
opacity:70%;
}
.follow h1{
font-size:35px;
padding-top: 20vw;
}
.follow h2{
font-size:30px;
}
<div class="main">
<div class="tiles">
<div class="chromebookHelpdesk"><a href="https://sledteam.github.io/sled/chromebook"><img
src="https://github.com/sledteam/sled/blob/master/Chromebook%20Helpdesk.png?raw=true" alt="Chromebook-Helpdesk"></a></div>
<div class="subhelp"><a href="https://sledteam.github.io/sled/chromebook"><img
src="https://github.com/sledteam/sled/blob/master/Sub%20Help.png?raw=true" alt="Sub Help"></a>
</div>
<div class="studentsTour"><a href="https://sledteam.github.io/sled/chromebook"><img
src="https://github.com/sledteam/sled/blob/master/New%20Students%20Tour.png?raw=true" alt="New Students Tour"></a></div>
</div>
I'm stuck with this for a week.
I would appreciate it if anyone knows a solution for this.

Answer 1

Complete guide to css flexbox
.tiles {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex: 1;
}
.section {
display: flex;
flex: 1;
flex-direction: column;
}
.item {
display: flex;
flex: 1;
padding: 1rem;
margin: 4px;
background: green;
color: white;
}
<div class="tiles">
<div class="section">
<div class="item">
<p>Chromebook Helpdesk</p>
</div>
</div>
<div class="section">
<div class="item">
<p>Sub Help</p>
</div>
<div class="item">
<p>Student Tour</p>
</div>
</div>
</div>

Answer 2

It is simple if you understand the concept here is the example:
As per your requirement you need 2 columns with single row so you will be creating flex property, now you need 2 columns hence you make it flex:50% like 2. Now coming to your image section where you need 2 images to be underneath so you will provide the height:50%(right images) and you will give height:100%(left image).
You can keep changing the sizes as you desire. You can also add responsive design for the same. Hope it helps.
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
<div class="row">
<div class="column">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:100%" />
</div>
<div class="column">
<div class="row">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
</div>
<div class="row">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
</div>
</div>
</div>