Switch column order on smaller screens using media queries-CodePudding

I have created 2 columns and 4 rows, each one is a flex element, it goes text-picture, then switches.

When you resize the window it goes text-img-img-text, but I want to go text-img-text-img.

.row1, .row2, .row3, .row4 {
      display: flex;
      flex-wrap: wrap;
      margin: 0 7.5vw 3vw 7.5vw;
      /* border:3px solid blue; */
}
    
/* Create four equal columns */
.column {
      box-sizing: border-box;
      flex: 50%;
      margin-top:5vw;
      border:3px solid black;  
}
    
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
        flex: 50%;
    }
}
    
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .row1 {
        flex-direction: column;
    }
}
  
.strat1, .strat2, .strat3, .strat4 {
        box-sizing: border-box;
        flex: 50%;
        /* margin-left:10vw; */
        margin-right:5vw; 
        /* margin-top:5vw; */
        /* transform: translateY(4vw); */
        border:3px solid black; 
}

.strat1 h1, .strat2 h1, .strat3 h1, .strat4 h1 {
        display: block;
        font-size: 2.2rem;
        overflow-wrap: break-word;
        text-align: center;
}
    
.strat1 p,.strat2 p,.strat3 p,.strat4 p {
        display: block;
        overflow-wrap: break-word;
        font-size: 1.1rem;
        line-height: 1.8rem;
}

img {
    width:25rem;
    height:20rem;
    /* transform: translateY(6vw);   */
}

.strat2-img, .strat4-img {
    float:right;
    margin-right:4vw;
}

.strat1-img, .strat3-img {
    margin-left:4vw;
}

    <div >
        <div  >
            <div >
                <h1>Getting Ahead</h1>
                <p>some text</p>
            </div>
        </div>
        <div  >
            <div >
                <img src="pics/gettingahead.jpeg">
            </div>
        </div>
    </div>

    <div >
        <div  >
            <div >
                <img src="pics/understanding.jpeg">
            </div>
        </div>
        <div  >
            <div >
                <h1>Understanding</h1>
                <p>some text</p>
            </div>
        </div>
    </div>
    <div >
        <div  >
            <div >
                <h1>Goal Setting</h1>
                <p>some text</p>
            </div>
        </div>
        <div  >
            <div >
                <img src="pics/goalsetting.jpg">
            </div>
        </div>
    </div>
    <div >
        <div  >
            <div >
                <img src="pics/passingstandard.jpeg">
            </div>
        </div>
        <div  >
            <div >
                <h1>Surpassing The Standard</h1>
                <p>some text</p>
            </div>
        </div>
    </div>

CodePudding user response：

You can switch the direction using flex-direction, see MDN docs about flex-direction.

Used in a media query, this can reverse the order on smaller screens:

    @media screen and (max-width: 800px) {
      .row1 {
        flex-direction: column;
      }
      .row2, .row4 { 
        flex-direction: column-reverse; 
      }
    }

CodePudding user response：

You could use CSS Grid, that gives you complete control over where your elements get placed using the order property. See the following example:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.container>div {
  display: inline-grid;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 800px) {
  .col1 {
    order: 2;
  }
  .col2 {
    order: 1;
  }
  .col3 {
    order: 4;
  }
  .col4 {
    order: 3;
  }
}

<div >
  <div >Text 1</div>
  <div ><img src='https://picsum.photos/id/10/200'></div>
  <div >Text 2</div>
  <div ><img src='https://picsum.photos/id/1003/200'></div>
</div>