html - 希望 DIV 在桌面上堆叠但在移动设备上彼此相邻

Question

我试图在桌面上保留一张带有描述的图片，然后在移动设备上希望图片在左边，描述在右边……更多的是尽可能让所有内容都在首屏。

我希望桌面上的 DIV 是:

一个一个

BBB

但是在手机上:

A B

A B

A B

我让它们在 parents 中尝试将它们放在一起，但似乎没有用。

<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

这是一个工作 fiddle :https://jsfiddle.net/zsvfLy7q/5/

基本上，您希望将 A 和 B 垂直包裹起来，然后将它们堆叠在移动设备上。

.wrapper {
  display: flex;
  flex-direction: column;
} 

@media (min-width:800px) {
  .wrapper {
    flex-direction: row;  
  }  
}

@media (max-width:800px) {
  .block {
    display: flex;
  }  
}

我使用的是 flexbox，因为它现在是首选方式，但同样可以用 float 实现，想法是一样的。