Responsive Design for mobile view with boxes

Question

I recently got help on an issue I got and the final code is in the code section. Now I have just recognized that for smartphone view it does not look the way I want it. The current format is as follows:

Image | Text   
Text | Image   
Image | Text   
Text | Image 

For mobile view it should be:

Image 
Text 
Image 
Text 
Image 
Text 
Image 
Text 

The format for the second and fourth row have to be changed for the mobile view, in order to have the order image - text - image - text etc. For mobile view I have this section: @media only screen and (max-width: 768px){} . Also, does it make sense to have a separate class for each row? Can you please help?

 .h1 { display: flex; align-items: center; justify-content: center; font-size: 50px; padding-bottom: 50px; } .text { font-size: 24px; flex-direction: column; } .desc { display: flex; flex-direction: row; flex-wrap: wrap; } .image, .text { display: flex; flex: 1 1 50%; align-items: center; justify-content: center; padding: 10px 10px 20px 10px; box-sizing: border-box; flex-direction: column; border: 2px solid; } .image img { max-width: 80%; } .left { justify-content: flex-start; } .right { justify-content: flex-end; }

 <div class="h1">Headline</div> <div class="desc"> <div class="image left"> <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="image right"> <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png"> </div> <div class="image left"> <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="image right"> <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png"> </div> </div>

Answer 1

You can achieve this by updating your CSS

@media only screen and (max-width: 768px){
  .desc {
      flex-direction: column;
  }

  .desc > div:first-of-type{
    order: 1;
  }
  
  .desc > div:nth-last-of-type(2){
    order: 2;
  }
  
  .desc > div:nth-last-of-type(3){
    order: 4;
  }
  
  .desc > div:nth-last-of-type(4){
    order: 3;
  }
  
  .desc > div:nth-last-of-type(5){
    order: 5;
  }
  
  .desc > div:nth-last-of-type(6){
    order: 6;
  }
  
  .desc > div:nth-last-of-type(7){
    order: 8;
  }
  
  .desc > div:nth-last-of-type(8){
    order: 7;
  }
}

and don't forget to add a viewport in your HTML head if you want the media query to work on mobile devices :

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

Think mobile first and update your html code:

 .desc { display: grid; } @media (min-width:768px) { .desc { grid-template-columns:1fr 1fr; /* 2 columns only on big screen */ grid-auto-flow:dense; /* fill all the area */ } .image:nth-child(4n + 3) { grid-column:2; /* move the each second image to the second column */ } } .image, .text { display: flex; align-items: center; justify-content: center; padding: 10px 10px 20px 10px; box-sizing: border-box; flex-direction: column; border: 2px solid; } .image img { max-width: 80%; }

 <div class="desc"> <div class="image"> <img src="https://picsum.photos/id/237/200/300"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="image "> <img src="https://picsum.photos/id/237/200/300"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="image"> <img src="https://picsum.photos/id/237/200/300"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> <div class="image"> <img src="https://picsum.photos/id/237/200/300"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> </div>

Answer 3

If you are able to restructure your code into groupings as follows:

 <div class="content-block"> <div class="image"> <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png"> </div> <div class="text"> <b>Text</b> <p>Text</p> </div> </div>

then you could rewrite the css for your markup in a more compact way that would prevent the need for adding more :nth-of-type statements to your css every time you added a new piece of text or an image.

This css could be written as follows and would account for both mobile and larger breakpoints:

 .content-block { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 16px; } .image, .text { display: flex; flex: 1 1 50%; align-items: center; justify-content: center; padding: 10px 10px 20px 10px; box-sizing: border-box; flex-direction: column; border: 2px solid; } .image img { max-width: 80%; } .content-block:nth-of-type(even) .image { order: 2; } @media only screen and (max-width: 768px) { .content-block { flex-direction: column; } .content-block .image { order: 1; } .content-block .text { order: 2; } } /* Styles from here and downward can be ignored - they are just for clarity of the example using colours/spacings */ .content-block { background: aliceblue; color: black; }

 <div class="desc"> <div class="content-block"> <div class="image left"> Image here </div> <div class="text"> <b>Text</b> <p>Text</p> </div> </div> <div class="content-block"> <div class="image left"> Image here </div> <div class="text"> <b>Text</b> <p>Text</p> </div> </div> <div class="content-block"> <div class="image left"> Image here </div> <div class="text"> <b>Text</b> <p>Text</p> </div> </div> </div>