Clever Geek Handbook

Change div order to widget

Im using the script below to reorder two divs - my html document has a "imagepanel ip-middle" div class preceding the "bgimagescale image2" div class. When viewed in a viewport smaller than 768px - I want the divs to be canceled. The following script does not cast the div on page load. Only when resizing - as I assume the script is specifying!:. Bind ("resize", listenWidth). I have not been able to find the correct way to reorder the divs using jquery on page load and also resize. Many thanks.

<script type="text/javascript">
jQuery(document).load($(window).bind("resize", listenWidth));

function listenWidth( e ) {
    if($(window).width()<767)
    {
        $("div.imagepanel.ip-middle").remove().insertAfter($("div.bgimagescale.image2"));
    } else {
        $("div.imagepanel.ip-middle").remove().insertBefore($("div.bgimagescale.image2"));
    }
}
</script>
+3


source to share


3 answers


Use load

and resize

together, something like this:



$(window).on("load resize",function(e){
0


source


I will also need to see your html to give you the exact advice, but in reality you don't need any js at all. Just use pure css and a little float trick. First set both divs to float to the left.

div{
  float:left;
  clear:both;
  }
Run codeHide result


and when changing media just change the float to "right" - the right float will change the order of the elements.



@media (max-width < 767px){
  div{ float:right }
  }
Run codeHide result


What all:)

0


source


If CSS flex display is an option * then there is no need to use jQuery.

.wrapper { display: flex; flex-direction: column; }
.imagepanel.ip-middle { background: red; }
.bgimagescale.image2 { background: green; }
@media screen and (max-width: 766px) {
  .imagepanel.ip-middle { order: 2; }
  .bgimagescale.image2 { order: 1; }
}
      

        
        
        
      

    
<p>Resize window to test</p>
<div class="wrapper">
  <div class="imagepanel ip-middle">First div in source order</div>
  <div class="bgimagescale image2">Second div in source order</div>
</div>
Run codeHide result


* CSS flex is not supported at this time .

0


source






More articles:


All Articles