Order of divs

HTML & CSS
1

please see

https://forallthetime.com/obx/FAQ.html on a small screen, 768px breakpoint

you will see a dark div followed by 2 lighter div finishing with a dark div

i am after dark, light, dark, light

i think there are (atleast) 2 ways to fix this…

one can set divs to be organized in a certain order (?) and use grid-area-templates

kindly provide a codepen with the proper code, and a comment explaing what you did

please help me out :slight_smile:

many thanks!

2

My opinion using HTML5 in a proper layout makes life easier and customizable. What I mean you’re designing a webpage, so why not design one even if it is a mock up?

Here’s a codepen that I did awhile back - https://codepen.io/Strider64/pen/gOGqrxo

Understand Grids and Flexbox is easy to learn and there are plenty of tutorials on the internet.

1 Like
3

So… to actually answer the question…

@media only screen and (max-width: 768px) {
  .grid {
      grid-template-columns: 1fr;
  }
  .grid__item:nth-of-type(odd) {
  background: gray;    
  }
  .grid__item:nth-of-type(even) {
  background: lightgray;    
  }  
}
1 Like
4

If you just want a background color change then the code above by @m_hutley will do that for you.

If you wanted the actual content swapped around then that will require a different approach.

5

SUCCESS!

it works!

thanks!

1 Like