CSS\HTML Responsive flexbox - html

Question

I have been working on developing my own webpage, and for the home page I wanted a nice looking banner with 3 tiles (1 big one left with 2 smaller ones stacked on top of eachother right).
I could get this all to work fine, but I now noticed that on mobile devices this really gets out of proportion, and I wanted to make the 3 tiles all on top of each other when the width of the screen gets less than let's say 300px.
However, I can not seem to get this to work by looking at other questions on stackoverflow, only tiles start to disappear
Example view of what I wish to accomplish
#media only screen and (min-width: 300px) {
.hero {
height: 400px;
width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
}
.left {
float: left;
width: 80%
}
.right {
float: left;
width: 80%
}
}
#media only screen and (min-width: 600px) {
.hero {
height: 400px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
}
}
.left {
background-image: url('http://via.placeholder.com/1600x1200');
background-size: cover;
flex: 1;
}
.left:hover {
opacity: 0.8;
}
.left:hover .btnLeft {
color: white;
background-color: orange;
border: 1px solid orange;
}
.right {
display: flex;
margin-left: 5px;
flex-direction: column;
flex: 0 0 40%;
}
.one {
height: 175px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 80%;
}
.one:hover {
opacity: 0.8;
}
.one:hover .btnTop {
color: white;
background-color: orange;
border: 1px solid orange;
}
.two {
height: 175px;
margin-top: 5px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 50%;
}
.two:hover {
opacity: 0.8;
}
.two:hover .btnBot {
color: white;
background-color: orange;
border: 1px solid orange;
}
.btnLeft {
margin-top: 300px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 3px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnTop {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnBot {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
<div class="hero">
<a href="http://example.com" class="left" >
<div class="btnLeft">Option 1</div>
</a>
<div class="right">
<a href="http://example.com" class="one" >
<div class="btnTop">Option 2</div>
</a>
<a href="http://example.com" class="two" >
<div class="btnBot">Option 3</div>
</a>
</div>
</div>

Answer 1

This is an easy effect to achieve using flexbox. On your smallest size screens give the .hero container a property of flex-direction:column to have them stack vertically. Once you hit your bigger breakpoint, change this to flex-direction:row.
Also, it's worthwhile to note that you don't need to add a float property to the .left and .right containers as this isn't how flexbox functions.
For a pretty in depth look of how flexbox works check out this link.
#media only screen and (min-width: 300px) {
.hero {
height: 400px;
width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
flex-direction:column;
}
}
#media only screen and (min-width: 600px) {
.hero {
height: 400px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
flex-direction:row;
}
}
.left {
background-image: url('http://via.placeholder.com/1600x1200');
background-size: cover;
flex: 1;
}
.left:hover {
opacity: 0.8;
}
.left:hover .btnLeft {
color: white;
background-color: orange;
border: 1px solid orange;
}
.right {
display: flex;
margin-left: 5px;
flex-direction: column;
flex: 0 0 40%;
}
.one {
height: 175px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 80%;
}
.one:hover {
opacity: 0.8;
}
.one:hover .btnTop {
color: white;
background-color: orange;
border: 1px solid orange;
}
.two {
height: 175px;
margin-top: 5px;
background-image: url('http://via.placeholder.com/380x260');
background-size: cover;
flex: 50%;
}
.two:hover {
opacity: 0.8;
}
.two:hover .btnBot {
color: white;
background-color: orange;
border: 1px solid orange;
}
.btnLeft {
margin-top: 300px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 3px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnTop {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
.btnBot {
margin-top: 140px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 2px;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-weight: normal;
text-transform: capitalize;
}
<div class="hero">
<a href="http://example.com" class="left" >
<div class="btnLeft">Option 1</div>
</a>
<div class="right">
<a href="http://example.com" class="one" >
<div class="btnTop">Option 2</div>
</a>
<a href="http://example.com" class="two" >
<div class="btnBot">Option 3</div>
</a>
</div>
</div>