Is there a way I can rearrange the display order by combining elements from two different child divs?

Question

Is there a way I can rearrange the display order by combining elements from two different child divs?

Here is the current HTML structure:

<div class="main-parent">
    <div class="column-left">
        <div class="1">
          1
        </div>
        <div class="2">
          2
        </div>
    </div>
    <div class="column-right">
        <div class="3">
          3
        </div>
        <div class="4">
          4
        </div>
    </div>
</div>

The CSS code for this layout is as follows:

.main-parent {
  display:flex;
  flex-direction:column;
}
.1 {
  order:4;
}
.2 {
  order:3;
}
.3 {
  order:2;
}
.4 {
  order:1;
}

I am facing issues with changing the order property due to having two different children divs under the main parent with a flex display.

Is there a way to resolve this problem without removing the left and right columns?

html css

Answer 1

Answer №1

Utilizing Flexbox has the potential to achieve this functionality, although it is generally not applicable when dealing with children of different parent elements.

Nonetheless, by overriding the display property of the parent elements to display:contents, it becomes possible for the children to be rearranged.

contents

These elements do not form a specific box on their own but are replaced by their pseudo-box and child boxes

MDN

Current support for this feature is quite extensive (excluding IE) - refer to CanIUse

In essence, the use of display:contents causes the "box" of the parent element to vanish, allowing the children to then function as flex-items of the grandparent.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.child {
  background: lightblue;
  border: 1px solid blue;
  padding: 1em;
}

.grand {
  display: flex;
  flex-wrap: wrap;
}

.moved {
  order: 2;
  background: lightgreen;
}

.parent {
  display: contents;
}

.child {
  flex: 0 0 50%;
}

<div class="grand">
  <div class="parent">
    <div class="child moved"> Child 1.1 Moved
    </div>
    <div class="child"> Child 1.2
    </div>
  </div>
  <div class="parent">
    <div class="child"> Child 2.1
    </div>
    <div class="child"> Child 2.2
    </div>
  </div>
</div>

Answer 2

Utilizing Flexbox has the potential to achieve this functionality, although it is generally not applicable when dealing with children of different parent elements.

Nonetheless, by overriding the display property of the parent elements to display:contents, it becomes possible for the children to be rearranged.

contents

These elements do not form a specific box on their own but are replaced by their pseudo-box and child boxes

MDN

Current support for this feature is quite extensive (excluding IE) - refer to CanIUse

In essence, the use of display:contents causes the "box" of the parent element to vanish, allowing the children to then function as flex-items of the grandparent.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.child {
  background: lightblue;
  border: 1px solid blue;
  padding: 1em;
}

.grand {
  display: flex;
  flex-wrap: wrap;
}

.moved {
  order: 2;
  background: lightgreen;
}

.parent {
  display: contents;
}

.child {
  flex: 0 0 50%;
}

<div class="grand">
  <div class="parent">
    <div class="child moved"> Child 1.1 Moved
    </div>
    <div class="child"> Child 1.2
    </div>
  </div>
  <div class="parent">
    <div class="child"> Child 2.1
    </div>
    <div class="child"> Child 2.2
    </div>
  </div>
</div>

Answer 3

Answer №2

To achieve the desired layout, simply apply a display flex to both column-right and column-left elements. Here is the revised code snippet for your reference.

.main-parent {
  display:flex;
  flex-direction:column;
}
.column-left {
  order: 2;
}
.column-right {
  order: 1;
}

.column-left,
.column-right {
  display: flex;
  flex-direction: column;
}
.column-left .box-one {
  order: 2;
}
.column-left .box-two {
  order: 1;
}
.column-right .box-three {
  order: 2;
}
.column-right .box-four {
  order: 1;
}

<div class="main-parent">
    <div class="column-left">
        <div class="box-one">
          1
        </div>
        <div class="box-two">
          2
        </div>
    </div>
    <div class="column-right">
        <div class="box-three">
          3
        </div>
        <div class="box-four">
          4
        </div>
    </div>
</div>

Answer 4

To achieve the desired layout, simply apply a display flex to both column-right and column-left elements. Here is the revised code snippet for your reference.

.main-parent {
  display:flex;
  flex-direction:column;
}
.column-left {
  order: 2;
}
.column-right {
  order: 1;
}

.column-left,
.column-right {
  display: flex;
  flex-direction: column;
}
.column-left .box-one {
  order: 2;
}
.column-left .box-two {
  order: 1;
}
.column-right .box-three {
  order: 2;
}
.column-right .box-four {
  order: 1;
}

<div class="main-parent">
    <div class="column-left">
        <div class="box-one">
          1
        </div>
        <div class="box-two">
          2
        </div>
    </div>
    <div class="column-right">
        <div class="box-three">
          3
        </div>
        <div class="box-four">
          4
        </div>
    </div>
</div>

Answer 5

Answer №3

I believe utilizing the flex display is a great option. By using media queries, you can easily adjust the flex-direction of your containers for mobile devices.

Check out these resources:

Here's an example:

.c {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

.main-parent {
    display: flex;
    flex-direction: column-reverse;
}

@media only screen and (min-width: 768px) {
    .main-parent{
        flex-direction: row;
    }
}

<div class="main-parent">
    <div class="column-left">
        <div class="c 1">
          1
        </div>
        <div class="c 2">
          2
        </div>
    </div>
    <div class="column-right">
        <div class="c 3">
          3
        </div>
        <div class="c 4">
          4
        </div>
    </div>
</div>

Answer 6

I believe utilizing the flex display is a great option. By using media queries, you can easily adjust the flex-direction of your containers for mobile devices.

Check out these resources:

Here's an example:

.c {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

.main-parent {
    display: flex;
    flex-direction: column-reverse;
}

@media only screen and (min-width: 768px) {
    .main-parent{
        flex-direction: row;
    }
}

<div class="main-parent">
    <div class="column-left">
        <div class="c 1">
          1
        </div>
        <div class="c 2">
          2
        </div>
    </div>
    <div class="column-right">
        <div class="c 3">
          3
        </div>
        <div class="c 4">
          4
        </div>
    </div>
</div>

Is there a way I can rearrange the display order by combining elements from two different child divs?

Answer №1

Answer №2

Answer №3

Similar questions

Cannot Display CSS Background Image Locally

Hidden bootstrap 4 custom checkbox issue

Incorporating CSS Styles into an HTML Page

The text color is being influenced by the transparent background behind it

Eliminate the content located between two specific words in the img src URL and then render the file from the new source by utilizing ht

Resolving formatting challenges in R markdown with Blastula

Obtaining JSON data in a separate JavaScript file using PHP

using angularjs to dynamically apply css styles

Help needed with CSS menu dropdown problem

Prevent the cascading of CSS styles on child list items

What is the best way to conceal a panel using animation.css slide effects in GWT?

Crop images in a canvas using a customized rectangle with the help of JQuery

How can you tell if a contenteditable div is currently in focus?

What are the essential Bootstrap CSS and JavaScript files that need to be connected to our HTML document?

The CSS Grid container fails to resize based on the content inside

Choose from the dropdown menu, not from the text

CSS - Negative Margins Leading to Horizontal Scrolling Issue in Mobile Viewport

Iterate through an Array of Objects and exhibit a single object property in HTML one at a time by utilizing Javascript

How can you stop text in a textarea from spilling over into the padding?

Expanding Issue with Bootstrap Navigation