CODEWITHSUNDEEP
javascriptjquerycss
ani_css
ani_css

Reputation: 2126

How to move div inside another in on responsive?

I want to move my p element inside in .a to .b div on responsive for example on 768px how can I do that ?

div{margin:10px;
padding:10px;}
.a{
background:#f0f0f0;
border:1px solid #ccc;
}
.b{
background:#999;
border:1px solid #666;
}
<div class="a">
<p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

Upvotes: 0

Views: 1673

Answers (3)

kevin b.
kevin b.

Reputation: 1534

I found this solution by using some jquery code (more specific, the .resize() function) and by adding an id to the < p> element you want to move (#moveElement):

$( window ).resize(function() {
  if ($(window).width() < 768) {
    $('#moveElement').appendTo('.b');
  } else {
    $('#moveElement').appendTo('.a');
}});

check this fiddle to see a working example.

Upvotes: 2

VTr
VTr

Reputation: 718

Yes, right. You can't change your HTML structure by using Css. It can be done with some lines of code.

window.addEventListener('load', function () {
    var a = document.querySelector('.a');
    var b = document.querySelector('.b');
    var c = document.querySelector('p');

    window.addEventListener('resize', function (event) {
        if (768 >= window.innerWidth && 'a' === c.dataset.location) {
            b.appendChild(c);
            c.dataset.location = 'b';
        } else if (768 < window.innerWidth && 'b' === c.dataset.location) {
            a.appendChild(c);
            c.dataset.location = 'a';
        }
    });
}, {once: true});
div {
    margin: 10px;
    padding: 10px;
}

.a {
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.b {
    background: #999;
    border: 1px solid #666;
}
<div class="a">
    <p data-location="a">lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

Upvotes: 1

Ionut Necula
Ionut Necula

Reputation: 11472

You can check for the window width and then use appendTo() method to move the element from .a to .b, like this:

if ($(window).width() < 768) {
  $('.a p').appendTo('.b');
}
div {
  margin: 10px;
  padding: 10px;
}

.a {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.b {
  background: #999;
  border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

If you want to see it on resize of the browser you can use $(window).resize(function(){ //your code here... }) alongside with the code above. Something like this:

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.a p').appendTo('.b');
  }
}).resize();
div {
  margin: 10px;
  padding: 10px;
}

.a {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.b {
  background: #999;
  border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

Upvotes: 2

Related Questions