时间戳

首页 > 解决方案 > 调整窗口大小时如何反转div的堆叠方式？

html - 调整窗口大小时如何反转div的堆叠方式？

问题描述

当屏幕宽度调整为 700 像素并低于照片堆栈时，它应该在文本顶部。我希望文本位于顶部，而不是在屏幕宽度大于 700 像素时颠倒顺序。

.section-a {
  	background: #eaeaea;
  	color: #333; 
  	padding: 3em .5em;

.section-a h2 {
    padding: .5em .5em 0 .5em; 
}

.section-a p {
    padding: .5em 2em;
    text-align: left;    
}

.img-a {
    display: block;
    margin: auto;
  	width: 100%;
  	height: auto;
}

#ceo-sig {
  	font-family: 'Seaweed Script', cursive;
  	font-size: 1.5em;
  	float: left;
  	padding-left: 35px;
}

.learn-more-btn {
    appearance: none;
    border: 0;
    border-radius: 5px;
    color: #fff;  
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: .45em .5em .25em .5em;
    width: 30%;
    text-shadow: 0 2px 4px rgba(0,0,0,0.30);
	background: #2FBC3D;  
    margin: 2em 0;
    background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%);
    border: 1px solid #0C6B16;
    box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50);
	opacity: 1;
	transition: color .2s ease-out;
	-moz-transition: color .2s ease-out;
	-webkit-transition: color .2s ease-out;
	-o-transition: color .2s ease-out;
}

.learn-more-btn:hover {
	color: #333;
}
<section class="section-a grid">
      <div class="box">
        <img class="img-a" src="https://static.wixstatic.com/media/0141bb700ad54cf2b0457ae50b0704c5.jpg/v1/fill/w_453,h_220,al_c,q_80,usm_0.66_1.00_0.01/Brainstorming.webp" alt="people watching presentation"> 
      </div> 
      <div class="box">
        <h2 class="content-title">How We Work</h2>
        <div class="content-text">
          <p>Every client engagement, every recommendation and every implementation is based on decades of experience managing leading global enterprises.  Rest assured, you will be getting leading edge decisions that solve today’s challenges and have a vision of tomorrow. We work as closely as you need to develop the right hosting and infrastructure decisions for your business, no matter how big or small.</p>
       </div> 
    </div> 
</section>

我只想补充一下，共有三行，每行在页面的一侧有文字，在另一侧有照片。当我调整大小时，我希望将文本放在相应照片的顶部。其他两行由于它们的初始顺序而没有这个问题。

标签： htmlcss

解决方案

如果您将 ID 添加到框中，您会给自己一个更轻松的工作。然后你可以做类似下面的媒体查询，没有太多困难。

@media only screen and (min-width: 700px) {
  #box1 {
    top: 230px;
  }
  #box2 {
    top: 0;
  }
  .box {
    display: inline-block;
    position: fixed;
  }
}
<section class="section-a grid">
  <div id="box1" class="box">
    <img class="img-a" src="https://static.wixstatic.com/media/0141bb700ad54cf2b0457ae50b0704c5.jpg/v1/fill/w_453,h_220,al_c,q_80,usm_0.66_1.00_0.01/Brainstorming.webp" alt="people watching presentation">
  </div>
  <div id="box2" class="box">
    <h2 class="content-title">How We Work</h2>
    <div class="content-text">
      <p>Every client engagement, every recommendation and every implementation is based on decades of experience managing leading global enterprises. Rest assured, you will be getting leading edge decisions that solve today’s challenges and have a vision
        of tomorrow. We work as closely as you need to develop the right hosting and infrastructure decisions for your business, no matter how big or small.</p>
    </div>
  </div>
</section>

推荐阅读