0

I would like to order my divs based on screen size using css only, and the following html that can't be changed due to constraints:

<div class="main">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

When the screen size is large enough, I want to have the following format:

|<div1>|<div2>|
|      |<div3>|

ie div1 is next to both div2 and div3, and div3 is beneath div2

When the screen size is small, I want to have the following format:

|<div2>|
|<div3>|
|<div1>|

ie the divs are all underneath each other, in the order 2, 3, 1.

Thank you

siya
  • 7
  • 2
  • 4
  • You have linked a few duplicates. However to guide you directly I'll give you a short summary: You need `media queries` to check for the screen-size or rather the viewport size (browser window). Then you can either use `CSS-Grid` + `grid-template-areas`, fixed placements with `grid-column`- and `grid-row`´-properties or using the `order`-property. Alternativly use Flexbox which also can make use of the `order`-property – tacoshy May 15 '22 at 22:51

1 Answers1

0

I would recommend using a grid and media queries like below.

.main {
  display: grid;
  grid-template-areas: 'div2' 'div1' 'div3';
}

.div1 {
  grid-area: div1;
}

.div2 {
  grid-area: div2;
}

.div3 {
  grid-area: div3;
}

@media only screen and (min-width: 800px) {
  .main {
    grid-template-areas: 'div1 div2' '. div3';
  }
}
<div class="main">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • Thank you ~ this code itself was a bit confusing, but in your comment you mentioned use of the grid-row and grid-column properties and that worked. – siya May 18 '22 at 23:58