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?

htmlcssdomresponsive-design

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

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;}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors? <script type="text/javascript"> function blinkit() { intrvl = 0; for (nTimes = 0; nTimes < 3; nTimes++) { intrv ...

jqueryhtmlcssbackground-color

An issue with JSPDF arises when used on mobile devices

Currently, I am working on a project to create a responsive web application, which involves utilizing JSPDF for generating PDF reports directly from HTML. For a demonstration of the functionality, you can check out this Demo. Unfortunately, when trying t ...

javascripthtmljspdf

How wide should the website layout be?

What is the perfect size for a standard portal website? I've seen many sites with widths ranging from 960px to 1000px. ...

css

Getting the Right Value: A Step-by-Step Guide to Setting the Default or Selected Value in

When creating directive form controls (text, select, radio), I am passing a value to the directive function. If this value is not set or empty, then the default value should be taken from the question data._pageAttributes.defaultValue. HTML <div ng-re ...

javascriptjqueryhtmlangularjs

Adjust the height to match the shortest sibling child div height

In my layout, I have multiple rows with each row containing multiple columns. Within each column, there is a div and a paragraph - the div contains an image. My goal is to set the div with the class cover-bg to the lowest height of cover-bg in the same row ...

javascripthtmljquerycss

How to dynamically set Bootstrap navbar item as active based on current filename?

Currently, as I construct my website using the bootstrap framework, I am facing a minor challenge. I want to activate a menu item based on the filename by utilizing an if statement. For instance, when the filename is "about," the "about" tab should be act ...

javascripthtml

The height of the container is not adjusted correctly after loading data via ajax which causes it to overlap with

My HTML code consists of a container with two columns (content and sidebar) and a footer. The content contains a horizontal list with li elements that are populated via ajax when the "Load More" button is pressed. I am using Bootstrap and testing on Chrome ...

jqueryhtmlcssajaxtwitter-bootstrap

Firefox and Internet Explorer have a tendency to break lines at very specific pixel measurements

Hey, I have a situation that goes like this: I have 4 objects with dimensions of exactly 76x76px placed within a 320px container. This setup seems to work well in Chrome as seen above. However, in Firefox and IE9, it looks like this: even though the < ...

htmlcssimagehtml-lists

The hyperlink for social media is not functioning properly within a list element

Having some trouble with the href-tags for social media on my contact page. Clicking on them doesn't seem to do anything. Any ideas on what might be causing this issue? html { height: 100%; box-sizing: border-box; background-color: #001725; ...

csshtmlhrefbrackets

Can anyone explain why two of my SVG files are displaying as identical in my React project?

The issue seems to lie within the SVG code itself. I have two SVGs exported from Figma and imported into ReactJS as ReactComponents. However, an anomaly occurs where React recognizes both SVGs as identical despite having different SVG codes. This makes me ...

htmlreactjssvgfigma

Transmitting Data to PHP Using JQuery/AJAX

I'm struggling with this issue. Here is the HTML code that I have: <input type="text" class="studno"><input type="button" value="Check" class="chstudno"> How can I send this data to PHP using JQuery/AJAX? Below is the code that I current ...

jqueryhtmlajax

Can one intercept the window.location.replace event?

Suppose I am currently browsing the URL "example.com/somepage#somehash" and then decide to execute window.location.hash = "anotherhash", the URL will be updated to "example.com/somepage#anotherhash". This action triggers the window.hashashchange event. On ...

javascripthtmldom-eventshashchange

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

After setting up my new development environment on Windows 10, I encountered an issue with less. Following the instructions on lesscss.org, I installed less using: npm install -g less The installation process completed without any errors. However, when ...

javascriptcssnpmless

Creating One Comprehensive Object by Merging Multiple Character Objects

I am attempting to extract text from a news article using the code snippet below: library(rvest) url <- "https://www.bbc.com/future/article/20220823-how-auckland-worlds-most-spongy-city-tackles-floods" final = url %>% read_html() %>% ...

htmlrtext

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

javascripthtmlcss

Navbar Growth Effect

I'm attempting to create an expanding effect in my navbar using Angular. When I click on "show information," the content should slide up. The issue is that the top part of my footer does not follow the effect. I have tried something like: <foot ...

htmlangulartypescript

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

When I submit a form on the view page, I want the form data to be saved in a database table and displayed without refreshing the page. Below is my view code: <div class="col-md-12"> <div class="row"> <div> <table class="table table-s ...

htmljsonajaxdatabasecodeigniter

Align text in the center of a static container

I am facing the challenge of aligning four h4 tags in the center of their respective fixed divs, all set to width: 100% to ensure their background-color: rgba(255, 255, 255, 0.5); covers the entire browser width. Despite trying various combinations of CSS ...

htmlcsstwitter-bootstrap

Struggling to make the CSS :not() selector function correctly as needed

I've been struggling to make the CSS :not() selector work in a specific way and despite searching for solutions, I haven't been successful. I came across some helpful resources like this page, but I couldn't figure it out on my own. Hopefull ...

htmlcss

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

htmljquerycss