How can I stack Columns when window is resized [duplicate] - html

Question

This question already has answers here:
Flexbox responsive row column layout
(3 answers)
Converting desktop layout to single-column mobile layout
(1 answer)
Closed 1 year ago.
I am working on a website.
I have a container, that has two columns. On the left, I have a product image, that when you hover on it, it shows that product in use.
To the right, I have a title, description, tech drawings.
I want it so that when the screen is resized to a mobile format, or even if the browser is shrunk, the columns will stack on top of one another.
Right now the image just gets smaller and smaller until you cannot see it.
I tried several attempts at using FlexBox. Did not have any luck. Here was the guide/rules I was following: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a quick JSfiddle I made up to see what I am talking about. This does not have any "attempt" code in it. Just the base code for the containing div, left and right columns, with some example images and text. https://jsfiddle.net/fmcdLxa4/1/
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
padding: 15px;
}
/* Columns */
.left-column {
float: left;
width: 50%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
}
.right-column {
float: left;
width: 50%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}
<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="http://www.deepdiveintel.com/wp-content/uploads/2013/09/Owl-Eye-art-300x300.jpg" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: 7/0 | 8/0
<p />
</div>
</div>
</div>
Any help would be awesome!

Answer 1

flex can wrap if you set it so. Also, one of your card's image needs to remain in the flow, so it can size its container. then flex:1 1 XX% will do the job.
https://codepen.io/gc-nomade/pen/MWpxYZw
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap:wrap;
padding: 15px;
}
/* Columns */
.left-column {
flex:1 1 40%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
min-width:320px;
}
.right-column {
flex:1 1 40%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-back{
position: absolute;
top:0;
}
.flip-box-front,
.flip-box-back {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}
<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://picsum.photos/id/1003/300/300" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="https://picsum.photos/id/10/300/300" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: 7/0 | 8/0
<p />
</div>
</div>
</div>