How display flex and block works? - html

Question

I have two container. Outer container is wrapping inner container.And in inner container is wrapping two dives. For inner container CSS is display flex. For small screen size I mention display block using media quire which is not working.What I am doing wrong.For small screen two div should stacking up.Why media quire not working? When I should give max-width to image?
.row2{
display: flex;
padding:2em 3em;
}
.outercontainer{
background-color: darkgray;
}
#media (min-device-width: 426px) and (max-device-width: 764px) and (-webkit-min-device-pixel-ratio: 2) {
.row2{
display: block;
padding: 0.1em;
}
.image2{
width: 100%;
}
}
<div class="outercontainer">
<div class="innercontainer row2">
<div class="col text">
<h3>title text</h3>
<p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
</div>
<div class="col image">
<img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
</div>
</div>
</div>

Answer 1

Adding flex-direction: column to the Flexbox container .row2 inside your media query creates a stacked "column" layout at smaller viewports so the image appears underneath the text. The media query max-width value might need to bumped up a bit to around 1000px so the flex-direction column layout happens sooner and the text next to the image doesn't appear squished. Try this out.
Also, the device-width media feature is deprecated and no longer recommended. Use min-width and max-width for length values in your media queries instead.
.row2 {
display: flex;
padding:2em 3em;
}
.outercontainer {
background-color: darkgray;
}
/* 764px max-width makes the image squish the text, try around 1000px */
#media (min-width: 426px) and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
.row2 {
display: flex;
flex-direction: column;
padding: 0.1em;
}
.image2 {
width: 100%;
}
}
<div class="outercontainer">
<div class="innercontainer row2">
<div class="col text">
<h3>title text</h3>
<p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
</div>
<div class="col image">
<img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
</div>
</div>
</div>