Question 42805 in Html Question posted in
Some basic documentation can be found here.

Specific order of divs – Html

I would like to have the order of divs on my site like on the image:
enter image description here

On the top part of image the red div should be floated to left and blue and green to right. Important for me is to have green div below blue, no matter what size of red div is, so clear: both is not fine. I tried with flexbox but also with no success. I also tried wrapping blue and green div in another div, name it rightColumn but then I am not able to achieve the lower part of image: on mobile devices (I know media only CSS rule so this is fine) I want to have this order: blue, red, green, each of 100% width.

How to achieve that in pure CSS? Is it even possible?

Tags:

4

Answers


  1. 0

    A mix of CSS grids and flexbox for mobile should accomplish this:

    const main = document.querySelector( 'main' );

// To simulate mobile behaviour
document.body.addEventListener( 'click', event => {
  
  main.classList.toggle( 'mobile' );
  
})
    main {
  display: grid;
  grid-template:
    "red blue" auto
    "red green" auto
   / auto 1fr;
  width: 100%;
  grid-gap: 20px;
}
#red {
  width: 65vw;
  height: 400px;
  background: red;
  grid-area: red;
  order: 1;
}
#blue {
  width: 100%;
  height: 300px;
  background: blue;
  grid-area: blue;
  order: 2;
}
#green {
  width: 100%;
  height: 300px;
  background: green;
  grid-area: green;
  order: 3;
}

.mobile {
  display: flex;
  flex-direction: column;
}
.mobile #red {
  width: 100%;
}
    <main>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</main>

    You can change the order on the mobile version (which you should stick into a @media query, but it’s stack overflow so for safety I simulated it with a class instead) by modifying the order property, and on desktop, you can do it by changing the values of the columns or rows in the grid-template.

    Docs for grid-template: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
    Docs for order: https://developer.mozilla.org/en-US/docs/Web/CSS/order

    Login or Signup to reply.
  2. 0

    You can do this with order:1 (order CSS property) by applying flex to its parent.

    Note: If you want to use Bootstrap then it will be very smooth.
    Bootstrap Orders

    For more detail please refer to this link CSS Order

    Login or Signup to reply.
  3. 0

    You may use grid and reset order and grid-template-columns for bigger screen.

    here is an example with a break point at 768px (i used html5 tags elements for the demo, but feel free to use your own markup and class/ids )

    section {
  display: grid;
  gap: .5em;
  padding: .5em;
}

@media (min-width:768px) {
  section {
    grid-template-columns: 60% 1fr;
    grid-auto-flow: row dense;
  }
  main {
    order: -1;
    grid-row: auto /span 2;/*(auto or 1) /  span as many rows that you have elements to stand in second column */
  }
}


/* colors */

body {
  background: #333;
  color: #eee;
  margin: 0;
}

header {
  background: #004488
}

main {
  background: #FF0000
}

footer {
  background: #0A8800;
}
    <section>
  <header>#004488 </header>
  <main> #FF0000 </main>
  <footer>#0A8800 </footer>
</section>
    Login or Signup to reply.
  4. 0

    An alternative to grid would be using flex with display contents:

    .container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.red {
  background: red;
  width: 60%;
}

.blue {
  background: blue;
  margin-bottom: 10px;
}

.green {
  background: green;
}

.column {
  width: 35%;
}

@media (max-width:768px) {
  .container {
    flex-direction: column;
  }
  .column {
    display: contents;
  }
  .red {
    order: 2;
    margin-bottom: 10px;
    width: 100%;
  }
  .blue {
    order: 1;
  }
  .green {
    order: 3;
  }
}
    <div class="container">
  <div class="red">red</div>
  <div class="column">
    <div class="blue">blue</div>
    <div class="green">green</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search