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

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

htmlcsssvg

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

cssangulartwitter-bootstrap

Several radio buttons and their corresponding labels are shown on a single line inside a nested div container

Upon stumbling across this post, I realized it perfectly aligns with my current goal: Radio Button and Label to display in same line. However, the challenge persists... The layout I currently have (first 3 columns) differs from what I aspire to achieve (l ...

htmlcss

What is the best way to spin an element around its center?

I'm faced with a challenge where I have an element that needs to be rotated using JavaScript. The rotation is currently functional, but it's rotating around points other than its center. My goal is to rotate the element around its own center. ...

javascriptjqueryhtmlcss

What is the best way to format these div elements in order to create a functional comment section?

For the past few hours, I've been struggling to figure out what’s causing issues with the styling on my webpage. The layout should display a user post on one side and a comment-section along with the comment form on the other. Within the PostComment ...

phpcss

Resizing the Vue page to fit the viewport and using Flexbox to anchor the footer to the bottom

My Vue.js page structure consists of a navigation bar, main body content, and a footer: <template> <div class="flex_container"> <div class="container_navigation"> <nav-bar /> </div> < ...

cssvue.jsflexbox

Adjust the width of Google chart to 100% automatically when the page is resized in Angular version 4 or higher

My application has numerous responsive wrappers on the site, each predefined from an API and containing a Google chart. The problem is that when the page initially loads, the charts are rendered at a specific size, and resizing the window only affects the ...

htmlcssangulargoogle-visualization

Include the attribute exclusively for the initial division within a group of corresponding elements

Looking to change the appearance of this HTML code without being able to edit it directly? <form method="POST" id="go123pago"> <div align="center" style="width:220px"> <div style="float:left;padding:10px;width:190px"> ...

jqueryhtmlcss

sequentially animating elements using animate css in a choreographed manner

I have created a unique jsfiddle with 20 boxes that I am trying to animate using the Animate.css plugin. The plugin can be found at daneden.me/animate. My goal is to animate each box one after the other in a sequential manner, but I seem to be having trou ...

javascriptjquerycsscss-transitions

"Troublesome issue with Bootstrap push and pull functionality not functioning correctly

I am currently experiencing issues with Bootstrap push and pull functionality. While the mobile view appears to be working correctly, the web view is shifted to the left. Any assistance on this matter would be greatly appreciated. Below is the code that i ...

csstwitter-bootstrappushpull

Tips for adjusting the up and down controls and spins of a date input after modifying its height

After adjusting the height of my inputs (date type) to 40px, I noticed that the up and down controls are no longer aligned with the text inside the field. I am looking for a solution to either adjust the height of the spins or remove them if necessary in ...

javascriptjquerycsshtml

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

javascripthtmlcssreactjsflexbox

problem with placing text into input field

When using my search program, I am encountering an issue where there is some added space before the text once it is set into the input box after clicking on a search result. To see the problem in action, you can visit the following link: http://jsfiddle. ...

jqueryhtml

Conceal the div element if the value exceeds 0

I'm looking for a way to display a div when the number of remaining days is less than 0. I got it working on jsfiddle, but for some reason, it doesn't work anywhere else. if ($('.daysrem&a ...

javascriptjqueryhtml

Show a div depending on user input

For those with more programming experience than myself, I have a simple question. In Rails, using coffescript, I want to show additional content based on a user's selection. Essentially, if they click on a checkbox, it should reveal an extra field for ...

jquerycssruby-on-rails-4coffeescript

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

htmlcssanimationsvg

Tips for adjusting the default container width in MaterializeCSS

The default width of container in MaterializeCSS is initially set to 70%: While the container class is not an integral part of the grid system, it plays a crucial role in organizing content by allowing you to centrally align your page's content. Th ...

cssgridviewmaterialize

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...

htmlcsstwitter-bootstrap-3responsive-designnav

Steps for extracting HTML content from a beautiful soup object

My current situation involves a bs4 object listing: >>> listing <div class="listingHeader"> <h2> .... >>> type(listing) <class 'bs4.element.Tag'> I am aiming to retrieve the raw html as a string. Initially, ...

pythonhtmlbeautifulsouphtml-parsing

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg