1

I have a couple of divs and I want to push the first div underneath the second on smaller screens, but I've no idea how this can be done.

On viewport > 1000px

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

On viewport < 1000px I'd like it to be

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

My CSS:

.group {
  width: 100%;
}
.first,
.second {
  float: left;
  width: 100%;
}

@media (min-width: 1000px) {
  .first,
  .second {
    width: 50%;
  }
}

Is there any possibility to achieve such thing?

Here is jsfiddle

Rafff
  • 1,510
  • 3
  • 19
  • 38
  • 2
    Can you make a Fiddle. – putvande Feb 12 '14 at 13:06
  • why not just use z-index – James Black Feb 12 '14 at 13:08
  • Possible duplicat - [What is the best way to move an element that's on the top to the bottom in Responsive design](http://stackoverflow.com/questions/17115995/what-is-the-best-way-to-move-an-element-thats-on-the-top-to-the-bottom-in-respo) – Vucko Feb 12 '14 at 13:08
  • @JamesBlack `z-index`? Can you put one below the other one as described in the question? – putvande Feb 12 '14 at 13:09
  • You can do this with absolute positioning. However, you do need to know the size of the elements – RobinvdA Feb 12 '14 at 13:11
  • Here you go.. http://jsfiddle.net/yPW76/ – Mr. Alien Feb 12 '14 at 13:15
  • @Mr.Alien That is indeed one way to do it lol Nice. Create an answer, may also want to tell the OP what's going on in there. – Ruddy Feb 12 '14 at 13:19
  • 2
    @Ruddy I didn't answered cuz reason 1, I am not sure OP has the elements of fixed height, it's responsive so I am sure it won't be fixed, and secondly, I've hit the rep cap already *(Kidding, I answer for fun and not for rep ;))* – Mr. Alien Feb 12 '14 at 13:21
  • If you're only targeting modern browsers, have a look at [flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) and the [`order` property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) – robertc Feb 12 '14 at 13:31

3 Answers3

2

Right I think this should work for you, take a look and let me know.

CSS:

.group {
    width: 100%;
}
@media (max-width: 1000px) {
    .second {
        float: left;
    }
    .first, .second {
        width: 100%;
    }
}
@media (min-width: 1000px) {
    .second {
        float: right;
    }
    .first, .second {
        width: 50%;
    }
}
.first {
    background-color: #ddd;
}
.second {
    background-color: #eee;
}

DEMO HERE

So we just swap the float around to swap the div to sit the place we want it. Pretty simple huh? :D.

Note: Im not 100% sure if this is how you wanted them to sit or if you wanted the first div on the second div and not floating by its side.

Community
  • 1
  • 1
Ruddy
  • 9,795
  • 5
  • 45
  • 66
0

U can do One thing make a div and copy the content of the div with class first and keep it display none for resolution > 1000 and make it display block below 1000 and keep the div.first display none.That is the only solution u can do for it .

Kingisback
  • 155
  • 5
  • 14
0

You could use jQuery for this

var width = $(window).width();
$( window ).resize(function() {
  if(width < 1000){ 
    $(".first").before($(".second"));
  }
});

http://jsfiddle.net/tX8LT/7/

RobinvdA
  • 1,313
  • 2
  • 13
  • 28