CSS 表 : how to display alternately first and last columns in a "abba" pattern on mobile?

Question

我是新来的。在过去的 2 个小时里，我一直在敲键盘，试图解决这个问题:

Assets :我有一个页面，其中使用左侧的图像和右侧的文本列出服务。除了... 下面这个服务是左边是文字，右边是图片，所以页面看起来有点像棋盘。 IMAGE-TEXT/TEXT-IMAGE/IMAGE-TEXT.. 你明白了。我用表格来做到这一点。每个服务一个表一行，每行两列。

这在桌面上很棒；问题是，在移动设备上，我可信赖的响应表会以这种方式运行:它们总是将左栏放在右栏的顶部，而忽略了内容。结果是我有图像然后是文本而不是文本然后是图像等等，这在手机上向下滚动时会造成混淆。我们不知道什么图像与什么相关，因为您会期望不同的行为:您希望看到图像，然后是文本，然后是图像，然后是文本等等......

我还没有在网上找到任何解决方案，可能是因为我无法在 Google 中正确综合我的问题!所以我想我问过你。欢迎任何评论和解决此类问题的方法!

这是我的 CSS 和 HTML:

section-services {
    display: table;
    width: 100%;
    min-height: 100%;
    height: inherit;
}
.row-services {
    display: table-row;
    width: 100%;
    height: 100%;
}
.col-left-services, .col-right-services {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {

}

@media all and (max-width: 800px){
	section-services{
		display:block;
		width: 100%;
	}
}

@media all and (max-width: 800px){
	.row-services,
	.col-left-services,
	.col-right-services,
	.col-left-services:before,
	.col-right-services:before{
		display:block;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-top:10px;
		padding-bottom:10px;
	}
}

<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>

<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>

Answer 1

我的方法是使用 display: flex。以 flex 模式显示您的 DIV，并在第二段中添加一个类以强制其位于顶部，如下所示:

section-services {
    display: table;
    width: 100%;
    min-height: 100%;
    height: inherit;
}
.row-services {
    display: table-row;
    width: 100%;
    height: 100%;
}
.col-left-services, .col-right-services {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
.col-left-services {
	padding-right: 10px;
}

.col-right-services {
padding-left:10px;
}

.content-services {

}

@media all and (max-width: 800px){
	section-services{
		display:block;
		width: 100%;
	}
}

@media all and (max-width: 800px){
	.row-services,
	.col-left-services,
	.col-right-services,
	.col-left-services:before,
	.col-right-services:before {
		display:flex;
		-webkit-display:flex;
		-moz-display:flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-top:10px;
		padding-bottom:10px;
	}

	.col-floated {
		order: -1;
		-webkit-order: -1;
		-moz-order: -1;
	}

}

<section-services>
	<div class="row-services">
		<div class="col-left-services">
			<div class="content-services">
				<h2 style="text-align: center;">RED FERRARI</h2>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
			</div>
		</div>
		<div class="col-right-services">
			<div class="content-services">
				<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
			</div>
		</div>
	</div>
</section-services>

<section-services>
	<div class="row-services">
		<div class="col-left-services">
			<div class="content-services">
				<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
			</div>
		</div>
		<div class="col-right-services col-floated">
			<div class="content-services">
				<h2 style="text-align: center;">YELLOW FERRARI</h2>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
			</div>
		</div>
	</div>
</section-services>