Question

我正在使用Bootstrap框架工作和Wordpress。我的网站带来了两种不同的帖子

html - 帖子类型1 - 右侧的图片

<section class="row row-eq-height">  
  <div class="col-md-6">
    <div class="section-content">
     ... content ...
    </div>
  </div>
 </div>

 <div class="col-md-6 section-img">
  ... image that takes up full column space ...
 </div>
</section>

html - 帖子类型2 - 左侧图片

<section class="row row-eq-height"> 

  <div class="col-md-6 section-img">
   ... image that takes up full column space ...
  </div>

  <div class="col-md-6">
    <div class="section-content">
     ... content ...
    </div>
  </div>
 </div>
</section>

CSS

.row-eq-height {
position: relative;
display: flex; 
min-height: 400px;
}

.row-eq-height .col-md-6, 
.row-eq-height .col-md-12 {
flex: 1;
display: flex;
align-items: center;
}

.section-content {
position: relative;
flex: 1;
text-align: center;
}

@media screen and (max-width: 768px) {

.section-content { 
  position: absolute;
  z-index: 10;
  right: 0; left: 0;
  margin: 0 auto;
  padding: 25px; 
}

.section-img { min-height: 400px; }

.row-eq-height { display: block; }

.row-eq-height .col-md-6, 
.row-eq-height .col-md-12 {
  flex: 1;
  display: block;
}
}

当屏幕为768px时，目标是每个帖子中的列重叠（内容列顶部图像列）。帖子类型1（右侧图像）工作正常。帖子类型2（左侧图像）文本内容位于图像列的下方。

我尝试使用推拉式课程但没有成功

在移动设备中重新排列列

0 个答案: