CODEWITHSUNDEEP
htmlcss
Igop
Igop

Reputation: 11

How move the first child to the bottom of parent, under last child?

I need to move to first div (id="div-1") to bottom of parent div (id="content") under last div (id="div-4")

But the first div move over last div

See image

I need it to be

See image

#content {
  position: relative;
}

#div-1 {
  position: absolute;
  bottom: 0;
}
<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Upvotes: 1

Views: 1083

Answers (6)

Igop
Igop

Reputation: 11

From the suggested answers I used this css:

#content {
 display: flex;
 flex-direction: column;
}

#div-1 {
 order: 1;
}

and js:

var fragment = document.createDocumentFragment(),
allChildDivs = document.querySelector("#content").children;
fragment.appendChild(allChildDivs[0]);
document.querySelector("#content").appendChild(fragment);

Thank to everyone

Upvotes: 0

kwiat1990
kwiat1990

Reputation: 489

If you can use flexbox, then that's what you want to achieve would be pretty simple thanks to order property:

#content {
  display: flex;
  flex-direction: column;
}

#div-1 {
  order: 1;
}
<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Upvotes: 1

Sujeith Gopi Nath
Sujeith Gopi Nath

Reputation: 430

HTML/CSS

Add transform: translateY(100%) to #div-1

JavaScript: You could use the fragment method.

1) Declare a fragment:

var fragment = document.createDocumentFragment();

2) Append desired element to the fragment:

fragment.appendChild(document.getElementById('source'));

3) Append fragment to desired element:

document.getElementById('destination').appendChild(fragment);

In your case;

var fragment = document.createDocumentFragment();
fragment.appendChild(document.getElementById('div1'));
document.getElementById('div2').appendChild(fragment);

Codepen https://codepen.io/Sujithgopinath/pen/XBGbRN

Upvotes: 2

Nitin Suri
Nitin Suri

Reputation: 1010

Improvising on the solution by @sujeith (https://stackoverflow.com/a/51811892/2024411) I have created the function such that you can go around rotating all the items from top being pushed to the end of the list.

function moveDiv() {
    var fragment = document.createDocumentFragment(),
        allChildDivs = document.querySelector("#content").children;
    fragment.appendChild(allChildDivs[0]);
    document.querySelector("#content").appendChild(fragment);
}

CodePen: https://codepen.io/nitinsuri/pen/djrpyo

Upvotes: 1

Salvatore
Salvatore

Reputation: 1435

I'm sure it might be possible using purely CSS. Anyway, I have written a solution for you using jQuery which targets the first <div> inside #content and moves it to the last position/bottom.

Useful refs :

1) :first-of-type : The CSS pseudo-class represents the first element of its type among a group of sibling elements.

2) .appendTo(): Insert every element in the set of matched elements to the end of the target.

(function($) {
  $.fn.moveItems = function() {
    $(this).children('div:first-of-type').animate(
      500,
      function() {
        $(this).appendTo($(this).parent());
      }
    );
  }

  $("#content").moveItems();

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Upvotes: 1

Michal
Michal

Reputation: 2073

Add transform: translateY(100%); to first div.

#content {
  position: relative;
}

#div-1 {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
}
<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Upvotes: 2

Related Questions