CODEWITHSUNDEEP
htmlcssmedia-queries
Francisco Couto
Francisco Couto

Reputation: 13

DIV 2 on top of DIV 1 when resizing

So, this is how it looks like when I'm on full screen: https://i.sstatic.net/ixgGS.png
And this is how I would like to look when I resize to a certain point: https://i.sstatic.net/NfgNR.png

I'm only able to have div 1 on top of div 2. I tried everything I know but I'm afraid that my knowledge is a little bit limited when it comes to this kind of challenges. I would really appreciate if anyone could help me.

Upvotes: 0

Views: 64

Answers (2)

nocthurnal
nocthurnal

Reputation: 45

AS i see there is a grey rectangle below the div2. That induce me to this that div 2 is inside div1. To set permanently div2 on top on div1 I would use the following schema:

1) Create a general div, this will include the two div's inside.

2) Create div2 inside the general div with a width of 100% and height 50% of the general div.

3) make the same with div1 but define it below.

This way both divs are fixed in a previous div wich you can move as you wish.

Upvotes: 1

nunoarruda
nunoarruda

Reputation: 2904

I think you can achieve what you're looking for with a CSS grid like Bootstrap has. Check the following fiddle: http://jsfiddle.net/nunoarruda/156trje7/

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div>
        <div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div>
    </div>
</div>

I've used the Bootstrap CSS grid and the push/pull classes to reorder the columns beginning from small (sm) screens. You can change it to medium (md) or bigger. Check the Bootstrap documentation for that: http://getbootstrap.com/css/#grid-column-ordering

Upvotes: 1

Related Questions