Manipulation of CSS DOM elements for achieving responsive design

Question

Manipulation of CSS DOM elements for achieving responsive design

I am working with a div field that contains an input element and a label element, both set to display:block

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

In the standard view, the input field is displayed first. However, for mobile responsiveness, I want the label to be displayed before the input field.

I am aware that this can easily be achieved through DOM manipulation using JavaScript. But is there a way to achieve reversing the order of DOM elements using only CSS?

html css dom responsive-design

Answer 1

Answer №1

This solution is effective.

section {
    display: flex;
}
button {
    display: inline-block;
    margin-right: 10px;
}
span {
    display: block;
}

View the code solution here.

Answer 2

This solution is effective.

section {
    display: flex;
}
button {
    display: inline-block;
    margin-right: 10px;
}
span {
    display: block;
}

View the code solution here.

Answer 3

Answer №2

A positive affirmation: you are exploring a concept like this: (adjust the viewport in jsfiddle for a demonstration) 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: following feedback, I adjusted the label positioning to alternate between above and below (up/down).

Here is an example with positional styles implemented: 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;}
}

Answer 4

A positive affirmation: you are exploring a concept like this: (adjust the viewport in jsfiddle for a demonstration) 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: following feedback, I adjusted the label positioning to alternate between above and below (up/down).

Here is an example with positional styles implemented: 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;}
}

Manipulation of CSS DOM elements for achieving responsive design

Answer №1

Answer №2

Similar questions

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

Challenges with Hangman in JavaScript

Horizontal centering using Bootstrap 4 media

AngularJS ng-model is experiencing issues with input number type and arrow keys specifically in the Edge browser

The alignment of SVG is not in sync with the aspect ratio

What is the best way to reference a div link from a different PHP file?

Switch up the Thumbnail Image based on the selected category

Styling images with text alignment in CSS

Django was unable to load the static image

Determine the time variance in hours and minutes by utilizing the keyup event in either javascript or jquery

What is the best way to style an icon in CSS?

Hide panel when button is clicked - bootstrap

Validating Forms in AngularJS: Ensuring At Least One Input Field is Not Empty

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

Having trouble with the scrollbar appearance after updating Chrome?

Customize WPBakery Accordion Background Color

The submit button fails to produce any result

What are some ways to reduce the delay of Dark mode on a website?

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I