如何反转窗口大小时 div 的堆叠方式?

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

可以使用媒体查询设置断点，然后使用flex或grid对div重新排序

您可以使用适用于flexorder：

关于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的grid:row：

关于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 和文本。谢谢！