change div order at screen sizes

Question

<div class="first"></div>
<div class="second"></div>

I've tried doing this with CSS changing them from float:left & float:right and reversing it under a @media (max-width:820px) query which I'm sure has worked in the past but didn't work.

Tried a simple JQuery:

if ($(window).width() < 820) {
   $( ".first" ).insertAfter( $( ".second" ) );
}
else {
   $( ".first" ).insertBefore( $( ".second" ) );
}

I know this should be so simple but it's just not playing ball, what am I doing wrong?

score 5 · Answer 1 · answered Jun 24 '16 at 07:55

5

Have you tried Flexbox ordering?

.container {
  display: flex;
}

.container > div {
  display: block;
  padding: 1em 0;
  flex: 1;
  background-color: red;
}

@media (max-width: 800px) {
  .first {
    order: 2;
  }
}

<div class="container">
  <div class="first">first</div>
  <div class="second">second</div>  
</div>

https://jsfiddle.net/xgkpfgc5/1/

answered Jun 24 '16 at 07:55

Andy Hoffman

18,436
4
42
61

Exactly what i was about to suggest. Save the jQuery @chobbit and try to learn more CSS, you'll incredibly speed up both developpement and the actual loading of your website ! – Carele Jun 24 '16 at 08:16
Although I can see this works for some reason this wouldn't work with my code but should work for many others so thanks :) I tried all the codes provided and really wanted this CSS to work as I prefer to use CSS instead of scripts if I can. Thankfully blonfu's CSS code below using table-row-group & table-row header worked with my code so I still avoided scripts :) – Chobbit Jun 24 '16 at 15:13

score 2 · Accepted Answer · answered Jun 24 '16 at 08:27

I think the better solution is with flexbox or if you use Bootstrap with pull and push classes but there is another interesting solution:

.first,
.second {
  background: #ccc;
  text-align: center;
  margin: 5px 0;
}
@media(max-width:820px) {
  .container {
    display: table;
    border-spacing: 0 5px;
    width: 100%;
  }
  .first {
    display: table-row-group;
  }
  .second {
    display: table-header-group;
  }
}

<div class="container">
  <div class="first">1</div>
  <div class="second">2</div>
</div>

This code worked perfectly for me and as I was really hoping didn't have to use script and worked with just CSS. I can see that Andy Hoffman's code should worked too but just wasn't working with my code for what ever reason so I have to declare this my best answer. Thanks :) — Chobbit, Jun 24 '16 at 15:14

score 1 · Answer 3 · answered Jun 24 '16 at 08:08

1

Have a look at below code:

https://jsfiddle.net/jwgbcdc7/2/

$(window).on("resize", function() {
  $(".currentwidth").text($(window).width());
  if ($(window).width() < 820) {
    $(".first").insertAfter($(".second"));
  } else {
    $(".first").insertBefore($(".second"));
  }

})

We have attached resize event to window to capture the newer screen width.

answered Jun 24 '16 at 08:08

vijayP

11,432
5
25
40

This works great as an adon to my original jquery so thanks, sadly I have to give being able to do this with CSS over scripts so you just missed out. But thanks this will work for people :) – Chobbit Jun 24 '16 at 15:22

score 0 · Answer 4 · answered Jun 24 '16 at 07:54

0

Try This i don't know but i hope its work :)

function checkPosition() {
    if (window.matchMedia('(max-width: 820px)').matches) {
        //...
    } else {
        //...
    }
}

answered Jun 24 '16 at 07:54

Roshan Trivedi

114
5

score 0 · Answer 5 · answered Jun 24 '16 at 07:55

Try this.

<div class="container">
        <div id="column1" class="row col-xs-6 col-sm-8">
            <div id="B" class="col-xs-12 col-sm-6">B</div>
            <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
        </div>
        <div id="column2" class="row col-xs-6 col-sm-4">
            <div id="A" class="col-xs-12 col-sm-12 ">A</div>
        </div>
    </div>
    and the JS

    $(function() {
        $(window).resize(function() {
            var w = $(window).width();
            if (w < 768 && $('#column1').children().length > 1) {
                $('#B').prependTo( $('#column2') );
            } else if (w > 768 && $('#column2').children().length > 1) {
                $('#B').prependTo( $('#column1') );
            }
        });
    });

If using bootstrap you can do this by using pull/push classes. — Faisal Ashfaq, Jun 24 '16 at 07:58
This works because when there’s enough space, they float into their original positions at first. However, when sized to medium and space is lost, they then stack since they can’t float through eachother. Note that while I used 6 columns for both, this works even if they are NOT both 6 columns — arun, Jun 24 '16 at 08:08

score 0 · Answer 6 · answered Jun 24 '16 at 08:05

0

You can even try this just add jquery method resize(), as below.

$(window).resize(function(){
var wd = $(window).width();
if ( wd < 820) {
   $( ".first" ).after( $( ".second" ) );
}
else {
   $( ".first" ).before( $( ".second" ) );
}
});

answered Jun 24 '16 at 08:05

frnt

8,455
2
22
25

score 0 · Answer 7 · answered Jun 24 '16 at 08:07

0

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

answered Jun 24 '16 at 08:07

arun

26
5

change div order at screen sizes

7 Answers7