On a small screen I want the div class “col-lg-7” to load first. I try to succeed this with the JS code below, but it still doesn’t work. Can somebody help me out, please?
HTML part:
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">image inserted
<div class="caption text-center">Waterlilies and Japanese bridge (1897-1899)</div>
<br>
second image inserted<div class="caption text-center">Camille Monet and a Child in the Artist’s Garden in Argenteuil.</div></div>
<div class="col-lg-7">
<h1 class="text-center">Claude Monet</h1>
<h6 class="text-center">(14 November 1840 – 5 December 1926)</h6>
JS part:
window.onresize = function(){
if ($('body').width() < 640){
//if body width is less than 640px, then put the second column before the first column
$('.col-lg-7').insertAfter(".col-lg-5");
}
else{
//if body width is more than or equal to 640px, then reset the ordering.
$('.col-lg-5').insertAfter(".col-lg-7");
}
}
@NinaFoth You will need to order your divs to make them visible in desired order. I could have given you a final solution but would suggest you to go through this small section specifically on re-ordering elements. It is simple enough to understand.
Thank you for your reaction. I read the part, but I feel it’s a little intimidating right now. But I found another solution.
As you said I re-ordered the div columns and used push and pull. It’s Bootstrap 3 but at least it works for me and as I understand it’s browser compatible.