css表格：如何在移动设备上以“abba”模式交替显示第一列和最后一列？

Question

我是新来的。 我敲打键盘上我的头，我花了近2小时，试图解决这个问题：

资产：我有一个页面，我使用左侧的图像列表中的服务，和文字上的权利。除...以下服务在左侧有文字，右侧有图像，所以页面看起来有点像棋盘。 IMAGE-TEXT/TEXT-IMAGE/IMAGE-TEXT ..你明白了。我用表来做到这一点。每个服务一个表格和一个行，每行两个列。

这在桌面上很棒;问题在于，在移动设备上时，我的可信响应表按这种方式工作：他们总是将左列放在右列的顶部，而忽略内容。其结果是，我有图像，然后是TEXT，然后是IMAGE等，这在手机上滚动时很混乱。我们不知道什么图像与什么相关，因为您会期望有不同的行为：您会希望看到图像，然后是TEXT，然后是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){ 
 
\t section-services{ 
 
\t \t display:block; 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

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

<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。 显示您的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 { 
 
\t padding-right: 10px; 
 
} 
 

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

 
.content-services { 
 

 
} 
 

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

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

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

 
}

<section-services> 
 
\t <div class="row-services"> 
 
\t \t <div class="col-left-services"> 
 
\t \t \t <div class="content-services"> 
 
\t \t \t \t <h2 style="text-align: center;">RED FERRARI</h2> 
 
\t \t \t \t 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. 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-right-services"> 
 
\t \t \t <div class="content-services"> 
 
\t \t \t \t <img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</section-services> 
 

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