css Question posted in
Some basic documentation can be found here.

move the second div to first position using css

i have one parent div , inside the parent div i have 3 children divs.

<div class="parent">
        <div class="child1">First</div>
        <div class="child2">Second</div>
        <div class="child3">Third</div>
</div>

For parent i already write below style.

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Expectation is

Second  First Third
Tags:

3

Answers


  1. 0

    You can use the css order property:

    For example by putting order: -1 the item will be placed at the begining
    Working example below

    .parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.child2 {
  order: -1 /*Moves it to the first place*/
}
    <div class="parent">
  <div class="child1">First</div>
  <div class="child2">Second</div>
  <div class="child3">Third</div>
</div>
    Login or Signup to reply.
  2. 0

    Use the order parameter on the children:

    .parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.child1 {
  order: 2;
}

.child2 {
  order: 1;
}

.child3 {
  order: 3;
}
    <div class="parent">
  <div class="child1">First</div>
  <div class="child2">Second</div>
  <div class="child3">Third</div>
</div>
    Login or Signup to reply.
  3. 0

    In addition to the order CSS property, you can also use the grid-template-areas property on the parent and grid-area property on the children if you prefer to use a label for the ordering rather than a number.

    .parent {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-areas: "col-1 col-2 col-3";
}

.child1 { grid-area: col-2; }
.child2 { grid-area: col-1; }
.child3 { grid-area: col-3; }
    <div class="parent">
  <div class="child1">First</div>
  <div class="child2">Second</div>
  <div class="child3">Third</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search