Lets say I have this HTML:
<div class="wrapper">
<div id="wrapperItems" class="container">
<div class="row belowContent">
<div class="favoriteContainer"></div>
<div class="bottomExcerpt">
<p>HTML links are hyperlinks. You can click on a link and jump to another document.</p>
</div>
</div>
</div>
</div>
<div class="wrapperTwo">
<div id="wrapperItemsTwo" class="container">
<div class="row belowContent">
<div class="picture">
<div class="symbol"></div>
</div>
<div class="smallhyperlinks">
<h2 class="hidden">H2 Text</h2>
</div>
</div>
</div>
</div>
On mobile ONLY, I want to move bottomExcerpt
from wrapper
and place it in wrapperTwo
after smallhyperlinks
and before picture
.
So basically the structure of wrapperTwo
on mobile(580) will be smallhyperlinks
-> bottomExcerpt
-> picture
.
How can I do this using jQuery?
I tried the following, but it doesn’t work properly:
$(window).resize(function () {
if ($(window).width() < 580) {
$('.wrapperTwo .picture').insertAfter('.wrapperTwo .smallhyperlinks');
$('.smallhyperlinks h2').removeClass('hidden');
if ($('.wrapper .bottomExcerpt').length > 0) {
$('.wrapper .bottomExcerpt').insertAfter('.wrapperTwo .smallhyperlinks');
}
}
else
{
$('.wrapperTwo .smallhyperlinks').insertAfter('.wrapperTwo .picture');
$('.smallhyperlinks h2').addClass('hidden');
}
});
For some reason, bottomExcerpt
is showing up below picture
, but I want it to show between smallhyperlinks
and picture
. How can I fix this issue?