CODEWITHSUNDEEP
jqueryhtmlcss
Hai Tien
Hai Tien

Reputation: 3117

CSS: Div appear below another

I have HTML like that:

<div class='box'>
    <div class='left'>content left</div>
    <div class='right'>content right</div>
</div>

Now, In smart phone devices, I want div has class is right is appeared ahead of class left.

How can I do it?

Upvotes: 1

Views: 125

Answers (3)

Ram kumar
Ram kumar

Reputation: 3162

Here is the code below: Smartphones (portrait and landscape)

@media only screen 
        and (min-width : 320px) 
        and (max-width : 480px) {
            .right,
            .left{
                float: left;
            }
        }

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241198

If you changed the original order of the elements, you could do something like this with pure CSS/HTML.

jsFiddle example - try re-sizing the window

HTML

<div class='box'>
    <div class='right'>content right</div>
    <div class='left'>content left</div>
</div>

CSS

.left {
    background:red;
    height:200px;
    width:50%;
    float:left;
}
.right {
    background:blue;
    height:200px;
    width:50%;
    float:right;
}
@media screen and (max-width: 481px) {
    .left {
        width:100%;
        float:none;
    }
    .right {
        width:100%;
        float:none;
    }
}

If you don't like that method, there is always an alternative where the order of the elements aren't changed. You tagged this with jQuery, so here:

jsFiddle example - try re-sizing the window

HTML

<div class='box'>
    <div class='left'>content left</div>
    <div class='right'>content right</div>
</div>

jQuery

$(window).resize(function(){
    if ($(window).width() <= 481){  
      $('.right').insertBefore('.left');
    }
    else {
      $('.right').insertAfter('.left');
    }
});

Upvotes: 1

gaurav5430
gaurav5430

Reputation: 13917

if you can use javascript and if you are able to detect whe the user is on smartphone, you can try something like this

var divs = document.getElementsByClassName('box');
for(var i=0; i<divs.length; i++) { 
  var rightDiv = divs[i].childNodes[1];
  divs[i].removeChild(rightDiv);
  divs[i].insertBefore(divs[i].childNodes[0], rightDiv);

}

Upvotes: 1

Related Questions