Want DIVs stacked on desktop but next to each other on mobile - html

Question

Im trying to keep an image with a description underneath it on desktop and then for mobile want the image to the left and description to the right... more for keeping everything above the fold as much as possible.
I want on desktop the DIVs to be:
A A A
B B B
But on mobile:
A B
A B
A B
I have them in parents to try and keep them together within there but doesn't seem to be working.
<style>
.pathOption_row {
display: inline-block;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
vertical-align: middle;
}
.pathOption_block {
display: inline-block;
position: relative;
width: 30%;
height: 300px;
text-align: center;
margin: 0 auto;
vertical-align: middle;
}
.pathOption_img {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
#media only screen and (max-width: 768px) {
.pathOption_block{
width:70%;
position: relative;
text-align: center;
}
.pathOption_image {
float: left;
display: inline-block;
position: absolute;
text-align: center;
margin: 0 auto;
vertical-align: middle;
.pathOption_text {
float: right;
}
.pathOption_img {
display: inline-block;
float: left;
position: relative;
width: 50%;
height: 100%;
text-align: center;
margin: 0 auto;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
<div class="pathOption_row">
<div class="pathOption_block">
<div class="pathOption_image">
<a class="pathOption_link" href="X">
<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
</a><!--/.po_link-->
</div><!--/.pathOption_image-->
<div class="pathOption_text">
B
</div><!--/.pathOption_text-->
</div><!--/.pathOption_block-->
<div class="pathOption_block">
<div class="pathOption_image">
<a class="pathOption_link" href="X">
<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
</a><!--/.po_link-->
</div><!--/.pathOption_image-->
<div class="pathOption_text">
B
</div><!--/.pathOption_text-->
</div><!--/.pathOption_block-->
<div class="pathOption_block">
<div class="pathOption_image">
<a class="pathOption_link" href="X">
<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
</a><!--/.po_link-->
</div><!--/.pathOption_image-->
<div class="pathOption_text">
B
</div><!--/.pathOption_text-->
</div><!--/.pathOption_block-->
</div><!--/.pathOption_row-->

Answer 1

Here's a working fiddle: https://jsfiddle.net/zsvfLy7q/5/
Basically you want to wrap the As and Bs vertically and then stack them inline on mobile.
.wrapper {
display: flex;
flex-direction: column;
}
#media (min-width:800px) {
.wrapper {
flex-direction: row;
}
}
#media (max-width:800px) {
.block {
display: flex;
}
}
I was using flexbox since it's preferred way nowadays, but the same can be achieved with floats, the idea is the same.