How to reverse the way divs stack when window is resized?

Question

When the screen width is resized 700px and below the photo stacks on top of the text as it should. I would like the text to sit on top instead, without reversing the order when the screen width is larger than 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>

I just want to add that there are three rows, each with text on one side of the page and a photo on the other. When I resize I want the text on top of the corresponding photo. The other two rows don't have this problem due to their initial order.

Answer 1

Display grid with grid-row worked. I just needed to switch the img and text in my HTML as well. thanks!

Answer 2

You can use media querie to set your breakpoint then reorder your div with flex or grid

You may use order that works with flex :

About flex, see this tutorial among others https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Below working snippet/demo with following update

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

---

or you may use grid:row that works with grid :

About grid , see this tutorial among others https://css-tricks.com/snippets/css/complete-guide-grid/

Below working snippet/demo with following update

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

You'd give yourself an easier job if you added ids to the boxes. Then you could do something like the following media query, without too much difficulty.

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

The section element could be styled like this

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

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