How to.. second column loading first on small screen?

How to.. second column loading first on small screen?
0

#1

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");
    }
}

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.


#3

@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.


#4

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.


#5

Just for the sake of completeness, with Bootstrap 4 and the reordering classes, it would have been like this:

<div class="col-md-7 order-md-2 order-1">
  ...
</div>
 <div class="col-md-5 order-md-1 order-2">
  ...
</div>

Glad you sorted your issue anyway. Nice tribute page, as well.


#6

@noyb
Thank you. I am going to give it a try.


#7

@mpsinghk
@noyb

I succeeded to do in with Bootstrap4. Thanks to both of you for your help. Much appreciated!