CODEWITHSUNDEEP
htmlcssdomresponsive-design
9blue
9blue

Reputation: 4753

Responsive design css dom element manipulation

I have div field including a input element and a label element. Both are display: block

<div class="cf-full">
    <input id="a" >
    <label class="helptext"</label>
</div>

So in normal view, the input field will come first. However, i want the layout to be responsive, so that in mobile the label will come first.

I know this DOM manipulation can be achieved by javascript easily. But is there a way to achieve the reverse DOM elements order by pure css?

Upvotes: 2

Views: 421

Answers (2)

caramba
caramba

Reputation: 22480

yes it is: you are trying something like this: (you can resize the viewport in jsfiddle to see what happens) http://jsfiddle.net/SuWLr/

<style type="text/css">
.cf-full input,
.cf-full label{
    float:left;
}
@media all and (max-width: 300px){
    .cf-full input,
    .cf-full label{
        float:right;
    }
}
</style>

<div class="cf-full">
    <input id="a" />
    <label class="helptext">Label</label>
</div>

UPDATE: after the coment as it wasn't clear to me to have the label change from above to underneath (up/down) so maybe this helps.

Something similar with some positiong styles: http://jsfiddle.net/SuWLr/1/

.cf-full {
    position:relative;
}
.cf-full input,
.cf-full label{
    display:block;
    position:absolute;
}
.cf-full input {left:0;top:20px;}
.cf-full label{left:0;top:0px;}

@media all and (max-width: 300px){
    .cf-full input {left:0;top:0px;}
    .cf-full label{left:0;top:20px;}
}

Upvotes: 1

smistry
smistry

Reputation: 1126

This works

div {
    display:table;
}
input {
    display:table-footer-group;
}
label {
    display:table-header-group;
}

http://jsfiddle.net/v8xTC/

Upvotes: 2

Related Questions