Is there a way to rearrange a group of divs using flexbox?

Question

Is there a way to rearrange a group of divs using flexbox?

I'm currently exploring the world of responsive web development using media queries, and I have a question - is it feasible to shift an element from one div to another without relying on a script?

In the desktop view, the layout should be like this:

      ---------
div1 |         | div2
div3 |  image  | div4
div5 |         | div6
      ---------

which is the desired arrangement.

On mobile screens, I envision the layout as follows:

      ---------
     |         | 
     |  image  |  
     |         |  
      ---------
         div1
         div2
         div3
         div4
         div5
         div6

However, I seem to face difficulties in moving divs beyond their parent divs.

Below is the HTML code:

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Shuffle</title>
    </head>
    <body>
    
    <div class="header">
          <h1>Shuffle</h1>
    </div>    
          <div id="main">
                <div class="leftBox">
                       <div class="boxItem" id="first">
                                  <p>1</p>      
                       </div>
                       <div class="boxItem" id="third">
                                  <p>3</p>      
                       </div>   
                       <div class="boxItem" id="fifth">
                                  <p>5</p>              
                       </div>
                </div>
                <div class="image">
                        <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
                </div>
                <div class="rightBox">
                       <div class="boxItem" id="second">
                                  <p>2<p>
                       </div>
                       <div class="boxItem" id="fourth">
                                  <p>4</p>
                       </div>   
                       <div class="boxItem" id="sixth"> 
                                  <p>6</p>      
                       </div>
                </div>
        </div>
    </body>
</html>

The CSS styles are as follows:

> ...
(presented in a more readable format)
...

If achieving this layout with the current CSS structure is not possible, is there an alternative method to accomplish this utilizing just one flexbox?

You can also find this project on CodePen for reference: https://codepen.io/johntarvis/pen/LYRYVmd?editors=1100.

html css

Answer 1

Answer №1

To achieve this layout, you can use the columns property and set it to 2. It may be challenging to do without jQuery, but for the image part, you can set it to absolute positioning and center it.

Below is an example of the code:

.wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

#main {
  position: relative;
}

.column {
  -webkit-columns: 2;
  columns: 2;
  text-align: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.sub_col {
  display: block;
  width: 34%;
  min-height: 100px;
  border: 1px solid red;
  margin: 0 0 1rem;
  position: relative;
  z-index: 15;
}

.image {
  width: 30%;
  margin: 0 auto;
  padding: 0;
  left: 0;
  right: 0;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

.image img {
  max-width: 100%;
}

@media only screen and (max-width:768px) {
  .column {
    -webkit-columns: 1;
    columns: 1;
  }
  .sub_col {
    width: 100%;
  }
  .image {
    top: 0;
    transform: none;
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
  }
}

<div class="wrapper">
  <div id="main">

    <div class="image">
      <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    </div>

    <div class="column">
      <div class="sub_col">1</div>
      <div class="sub_col">2</div>
      <div class="sub_col">3</div>
      <div class="sub_col">4</div>
    </div>

  </div>
</div>

This configuration ensures that your div elements maintain their order when numbered as 1, 2, 3, 4, and so on.

Answer 2

To achieve this layout, you can use the columns property and set it to 2. It may be challenging to do without jQuery, but for the image part, you can set it to absolute positioning and center it.

Below is an example of the code:

.wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

#main {
  position: relative;
}

.column {
  -webkit-columns: 2;
  columns: 2;
  text-align: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.sub_col {
  display: block;
  width: 34%;
  min-height: 100px;
  border: 1px solid red;
  margin: 0 0 1rem;
  position: relative;
  z-index: 15;
}

.image {
  width: 30%;
  margin: 0 auto;
  padding: 0;
  left: 0;
  right: 0;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

.image img {
  max-width: 100%;
}

@media only screen and (max-width:768px) {
  .column {
    -webkit-columns: 1;
    columns: 1;
  }
  .sub_col {
    width: 100%;
  }
  .image {
    top: 0;
    transform: none;
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
  }
}

<div class="wrapper">
  <div id="main">

    <div class="image">
      <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    </div>

    <div class="column">
      <div class="sub_col">1</div>
      <div class="sub_col">2</div>
      <div class="sub_col">3</div>
      <div class="sub_col">4</div>
    </div>

  </div>
</div>

This configuration ensures that your div elements maintain their order when numbered as 1, 2, 3, 4, and so on.

Answer 3

Answer №2

To achieve the desired layout, you can utilize @media queries and flexbox:

#main {
    display: flex;
    width: 100%;
    flex-direction: row;
    height: 300px;
}
#main > div { width: 33%;}
.leftBox, .rightBox {
    height: 100%; text-align: center;
    display: flex;        
    flex-direction: column;
    justify-content: center;
}    
img {max-width: 100%; height: auto;}
@media screen and (max-width: 768px) {
    #main {
        flex-direction: column;  
        height: auto;
    } 
    #main > div { width: 100%;}
    .image {order: -1;}
}

<div class="header">
        <h1>Shuffle</h1>
    </div>
    <div id="main">
        <div class="leftBox">
            <div class="boxItem" id="first">
                <p>1</p>
            </div>
            <div class="boxItem" id="third">
                <p>3</p>
            </div>
            <div class="boxItem" id="fifth">
                <p>5</p>
            </div>
        </div>
        <div class="image">
            <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
        </div>
        <div class="rightBox">
            <div class="boxItem" id="second">
                <p>2<p>
            </div>
            <div class="boxItem" id="fourth">
                <p>4</p>
            </div>
            <div class="boxItem" id="sixth">
                <p>6</p>
            </div>
        </div>
    </div>

Further information on ordering elements with flex can be found on MDN

Explore this related discussion on SO: how can I reorder HTML using media queries?

Answer 4

To achieve the desired layout, you can utilize @media queries and flexbox:

#main {
    display: flex;
    width: 100%;
    flex-direction: row;
    height: 300px;
}
#main > div { width: 33%;}
.leftBox, .rightBox {
    height: 100%; text-align: center;
    display: flex;        
    flex-direction: column;
    justify-content: center;
}    
img {max-width: 100%; height: auto;}
@media screen and (max-width: 768px) {
    #main {
        flex-direction: column;  
        height: auto;
    } 
    #main > div { width: 100%;}
    .image {order: -1;}
}

<div class="header">
        <h1>Shuffle</h1>
    </div>
    <div id="main">
        <div class="leftBox">
            <div class="boxItem" id="first">
                <p>1</p>
            </div>
            <div class="boxItem" id="third">
                <p>3</p>
            </div>
            <div class="boxItem" id="fifth">
                <p>5</p>
            </div>
        </div>
        <div class="image">
            <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
        </div>
        <div class="rightBox">
            <div class="boxItem" id="second">
                <p>2<p>
            </div>
            <div class="boxItem" id="fourth">
                <p>4</p>
            </div>
            <div class="boxItem" id="sixth">
                <p>6</p>
            </div>
        </div>
    </div>

Further information on ordering elements with flex can be found on MDN

Explore this related discussion on SO: how can I reorder HTML using media queries?

Answer 5

Answer №3

CSS Grid could be the perfect solution for your layout.

By maintaining a logical HTML ordering of 1 - 6, you can utilize CSS to arrange the display without dealing with absolute positioning. The only drawback arises when you have a varying number of rows and require an image to span across all of them. For such cases, refer to this answer:

To style minimally for mobile devices, replace the code within your desktop media query accordingly. Then, adjust the styling as necessary.

#main {
  /*Define Grid*/
  display: grid;
  /*Allocate 3 equal columns*/
  grid-template-columns: 1fr 1fr 1fr;
  /*Partition into 3 equal rows -- Can be excluded*/
  grid-template-rows: 1fr 1fr 1fr;
  /*Specify a named area for the central picture*/
  /*grid-template-areas: ". Pic ." ". Pic ." ". Pic .";*/
}


#main>.image {
  /*Position the image in column 2*/
  grid-column-start: 2;
  /*Position the image in the first row, spanning 3 rows*/
  grid-row: 1 / span 3;
  /*If using a named area, assign it here*/
  /*grid-area: Pic; */
}

/*For illustrative purposes only; refrain from moving this to your media query!*/
.image>img {
  width: 200px;
}

.boxItem {
  text-align: center;
}

<div class="header">
  <h1>Shuffle</h1>
</div>
<div id="main">

  <div class="image">
    <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
  </div>
  <div class="boxItem"><p>1</p></div>
  <div class="boxItem"><p>2</p></div>
  <div class="boxItem"><p>3</p></div>
  <div class="boxItem"><p>4</p></div>
  <div class="boxItem"><p>5</p></div>
  <div class="boxItem"><p>6</p></div>
</div>

Answer 6

CSS Grid could be the perfect solution for your layout.

By maintaining a logical HTML ordering of 1 - 6, you can utilize CSS to arrange the display without dealing with absolute positioning. The only drawback arises when you have a varying number of rows and require an image to span across all of them. For such cases, refer to this answer:

To style minimally for mobile devices, replace the code within your desktop media query accordingly. Then, adjust the styling as necessary.

#main {
  /*Define Grid*/
  display: grid;
  /*Allocate 3 equal columns*/
  grid-template-columns: 1fr 1fr 1fr;
  /*Partition into 3 equal rows -- Can be excluded*/
  grid-template-rows: 1fr 1fr 1fr;
  /*Specify a named area for the central picture*/
  /*grid-template-areas: ". Pic ." ". Pic ." ". Pic .";*/
}


#main>.image {
  /*Position the image in column 2*/
  grid-column-start: 2;
  /*Position the image in the first row, spanning 3 rows*/
  grid-row: 1 / span 3;
  /*If using a named area, assign it here*/
  /*grid-area: Pic; */
}

/*For illustrative purposes only; refrain from moving this to your media query!*/
.image>img {
  width: 200px;
}

.boxItem {
  text-align: center;
}

<div class="header">
  <h1>Shuffle</h1>
</div>
<div id="main">

  <div class="image">
    <img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
  </div>
  <div class="boxItem"><p>1</p></div>
  <div class="boxItem"><p>2</p></div>
  <div class="boxItem"><p>3</p></div>
  <div class="boxItem"><p>4</p></div>
  <div class="boxItem"><p>5</p></div>
  <div class="boxItem"><p>6</p></div>
</div>

Is there a way to rearrange a group of divs using flexbox?

Answer №1

Answer №2

Answer №3

Similar questions

HTML visibility property fails to function

Increase the div id using jQuery

My draggable item seems stuck in place. Any ideas on how to get it moving again?

Disordered block elements

Instructions on how to change the color of specific text to red

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

Assistance required with extracting information from JSON format on a website

Is it possible to modify this code to accept multiple IDs at once?

What is the best way to alter the background of a div when hovering over a button in a separate div?

Implementing jQuery slideDown effect on a nested table element

jQuery Modal activated only once upon clicking

What is the best way to retrieve the ID of a <tr> or <td> element?

Steps to transfer the content of a label when the onclick event occurs

Retain the chosen values even after submitting the form

Triggering a jQuery event upon clicking a link

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Dynamically setting CSS values with jQuery to center an image within a div

Retrieve PHP variable from a PHP CSS file

Make the Angular Modal scrollable except for when a specific div is being click dragged

Determine the quantity of data entries in a Mysql database table using php