Question

将屏幕宽度调整为700像素时，在文字上方的照片堆栈下方应按原样放置。我希望文本位于顶部，而不在屏幕宽度大于700px时反转顺序。

.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>

我只想添加三行，每行的一侧是文本，另一侧是一张照片。调整大小时，我希望文字出现在相应照片的顶部。其他两行由于其初始顺序而不会出现此问题。

Answer 1

section元素可以这样设置

section {
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 700px) {
  section {
    flex-direction: column;
  }
}

Answer 2

如果将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>

Answer 3

您可以使用media querie设置断点，然后用div或flex来重新排列grid

您可以使用与order一起使用的flex：

关于flex，请参见本教程https://css-tricks.com/snippets/css/a-guide-to-flexbox/

下面的代码段/演示如下更新

@media screen and (min-width: 701px) {
  .grid {
    display: flex;
    flex-direction: column;
  }
  .grid .box:first-child {
    order: 1
  }
}

@media screen and (min-width: 701px) {
  .grid {
    display: flex;
    flex-direction: column;
  }
  .grid .box:first-child {
    order: 1
  }
}

.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>

或者您可以使用与grid:row一起使用的grid：

关于grid，请参见本教程https://css-tricks.com/snippets/css/complete-guide-grid/

下面的代码段/演示如下更新

@media screen and (min-width: 701px) {
  .grid {
    display: grid;
  }
  .grid .box:nth-child(2) {
    grid-row:1
  }
}

@media screen and (min-width: 701px) {
  .grid {
    display: grid;
  }
  .grid .box:nth-child(2) {
    grid-row:1
  }
}

.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>

Answer 4

显示网格行有效的网格。我只需要在HTML中切换img和文本。谢谢！

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

4 个答案: