How to change two Div placement via CSS

Question

I have a html code

<div class="main">
  <div class="child1">I'm working Child 1</div>
  <div class="child2" >I'm working Child 2</div>
  <div class="child3" >I'm working Child 3</div>
</div>
<div class="another">
 <div class="child111">I'm working Child 111</div>
</div>

now I want to show Child111 before Child2 but after Child1 via CSS

Does this answer your question? [How can I reorder my divs using only CSS?](https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-using-only-css) — James Burgess, Jun 16 '20 at 09:28
what do you mean with before? higher on the page or above the other div? — Ramon de Vries, Jun 16 '20 at 09:28
@JamesBurgess sir this not same like your mentioned Answer please look at the update Question. — Asad Khan, Jun 16 '20 at 10:15

score 1 · Answer 1 · answered Jun 16 '20 at 09:30

You can do this easily by using Flexbox and setting flex-direction: column-reverse; on the parent container. It will reverse the order of its children.

Read more about Flexbox at MDN.

.main {
  display: flex;
  flex-direction: column-reverse;
}

<div class="main">
  <div class="child1">I'm working Child 1</div>
  <div class="child2">I'm working Child 2</div>
</div>

score 0 · Answer 2 · answered Jun 16 '20 at 09:29

You can use grid and grid-template-areas where you can custom place the order or column with grid-area. grid-area gives you a visual representation of how the rows should appear and allows you to name the rows for better readability:

.main {
  display: grid;
  grid-template-areas:
      "first-row"
      "second-row"
  ;
}

.child1 {
  grid-area: first-row;
}

.child2 {
  grid-area: second-row;
}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

score 0 · Answer 3 · answered Jun 16 '20 at 09:33

0

And yet another possibility:

.main>div{ float: left;}

or

.main>div{ float: right;}

answered Jun 16 '20 at 09:33

Michel

4,076
4
34
52

How to change two Div placement via CSS

3 Answers3