Как обратить вспять способ стек div при изменении размера окна?

Question

Когда ширина экрана изменяется на 700px и ниже, фотографии располагаются поверх текста, как и должно быть.Вместо этого я хотел бы, чтобы текст располагался сверху, без изменения порядка, когда ширина экрана превышает 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>

Я просто хочу добавить, что есть три строки, каждая с текстом на одной стороне страницы и фотографией на другой.Когда я изменяю размер, я хочу текст сверху соответствующей фотографии.Другие две строки не имеют этой проблемы из-за их начального порядка.

Answer 1

Вы бы упростили себе работу, если бы добавили идентификаторы в коробки. Тогда вы можете сделать что-то вроде следующего медиа-запроса, без особых затруднений.

@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 2

Элемент section может иметь такой стиль

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

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

Answer 3

Отображение сетки с работающей сеткой.Мне просто нужно было переключить IMG и текст в моем HTML, а также.спасибо!

Answer 4

Вы можете использовать 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>