Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label:

<div class="js-form-item ">

    <input  type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> 

    <label for="option-a-checkboxes-11" class="option">
        Factures  11chf
    </label>

    <div class="option-price-style">  </div>
</div>

The issue I am facing is that the input appears before the label, but I am attempting to reverse the order so that the label comes before the input. I have attempted this by setting the input to display:block and adding margin-bottom:1px, however, it has not been successful.

htmlcss

Answer №1

It seems like reversing the order may not be possible due to the structure of your CSS, which resembles the following:

input > label {}

However, there is a solution using flexbox that can achieve what you are looking for:

div {
  display: flex;
  flex-direction: column;
}
input {
  order: 2;
}
label {
  order: 1;
}

Check out this demo on JSFiddle

Answer №2

Setting them to float: right will cause the items to display in reverse sequence.

If this outcome is not satisfactory - such as if you prefer a vertical layout - adjustments can be made using margin or padding to reposition the elements.

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

What is the process for adjusting the position following the modification of a table value in React?

In my React UI, I have set up two text fields for entering values. After saving the values, they are displayed in a table below (designed with antd). When I click on a record in the table to edit it, I want the data from that record to populate the text f ...

javascripthtmlcssreactjsantd

How to retrieve information from a pre-populated <textarea> using Google Maps script in AngularJS

Is there a way to transfer data from a prefilled <textarea> that is populated by accessing the Google Maps API in a JavaScript script, into an AngularJS controller? $scope.Add=function(msg){ $log.log(msg) } <div ng-app=""> <div ng-contro ...

htmlangularjsgoogle-mapsangular-promiseangularjs-service

How to access a PHP include using data retrieved from a MySQL database?

I am currently in the process of developing a website that will be powered by a MySQL database. To simplify the structure of the URLs, I have decided to rewrite them to point to a single file. The file's layout is as follows: <html> <head&g ...

phpmysqlhtml

Tips for maintaining the size of a div container

Take a look at the following code snippet: <head> <title></title> <style> .section_divs { background-color: lightblue; float: left; } #section_empty { background-color: tomato; width ...

htmlcss

Learn how to send dynamic data to another HTML element using Ajax's success function

I received a successful ajax response from one HTML file, but I'm struggling to dynamically set the data from this response to another HTML file. Can anyone help me with this issue? Here is the code snippet from my ajax report: success: function( ...

javascriptjqueryhtmlajax

How to align text to the right in an Android TextView using HTML

I need to display some HTML content in a TextView. I am aware that certain HTML tags are not compatible with Android, so I have turned to a third-party library to incorporate bulletpoints and numbered lists. However, I also require support for right alignm ...

androidhtmltextview

Adaptable Image Maintains Integrity

My code is generating the following output: While I want the images to resize when dragged in, one of the right-hand images does not move below the main image as intended. Here is my code: Can anyone help me resolve this issue? Check out my CSS and HTML ...

htmlcssimageresponsive-design

Concealed Separator for Text Elements in HTML

I am in search of a method to distinguish certain specific strings within HTML code. Although I can recognize the desired strings, they may also appear as part of longer strings throughout the document. In order to locate them, I currently insert a special ...

htmlnon-printing-characters

ReactJS is having trouble with inline animation styles

After successfully implementing a timer using CSS with animation, everything was working as expected. However, I encountered an issue when trying to convert it into JSX inline styles in React. The animation stopped working as smoothly as before due to the ...

cssreactjsanimationjsx

The CSS box-shadow property failed to render properly on Internet Explorer and Safari browsers

#keyboard { position: fixed; background: #eee; display: none; border: 1px solid #ccc; border-radius:7px; width: 950px; height: 300px; padding: 5px; cursor: move; background-image:url('BackgroundImage.jpg'); box-shadow: -5px -5px 5px 5px #888; -m ...

htmlcssinternet-explorerfirefoxsafari

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

javascripthtmlreactjstypescript

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

bootstrap 4 - logo in navbar brand stays the same even when scrolling

I integrated Bootstrap 4 and successfully created a navbar. However, I am encountering a conflict when trying to change the navbar logo upon scrolling down. Despite my efforts, it is not functioning as expected. Does anyone know how to resolve this issue? ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

javascripthtml

Ways to update the HTML layout for certain components using the Selenium driver

Even though I am still learning about selenium, it appears that the driver initially caches the HTML, causing any subsequent modifications to go unnoticed (unless the page is refreshed). This is a snippet of what my HTML code looks like: <div class="q ...

pythonhtmlseleniumxpath

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

htmlcsstwitter-bootstrapuser-interface

Could the Error Detected by Siteimprove Regarding WAI-ARIA Criterion 1.3.1 be a Mistake?

When using the Siteimprove extension v. 126 for Chrome, the following HTML snippets are all showing an issue labeled "Input field has no description 1.3.1" Some may argue that a description is unnecessary because the aria-hidden attribute should effective ...

htmlmaterial-uiaccessibilitywai-ariaaria-role

Why Isn't This JPG Image Functioning Properly in HTML/CSS?

I am facing an issue with a JPG image that I am attempting to use in CSS as a background-image for a div container. For some reason, this particular image refuses to render in the viewport. Interestingly, when I inspect the element, I can see its thumbnail ...

htmlcssreactjsimagejpeg

Guide to Re-rendering a component inside the +layout.svelte

Can you provide guidance on how to update a component in +layout.svelte whenever the userType changes? I would like to toggle between a login and logout state in my navbar, where the state is dependent on currentUserType. I have a store for currentUserTyp ...

javascripthtmlcsstypescriptsvelte

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...

htmlcssangulardockpanel