Is it possible to reorganize several divs for mobile screens?

Question

Is it possible to reorganize several divs for mobile screens?

My setup is quite intricate.

I have a layout with 2 rows consisting of three divs each on larger screens.

It looks something like this:

<div class="row row-1">
  <div class""square">square 1</div>
  <div class""square">square 2</div>
  <div class""square">square 3</div>
</div>
//some more html
<div class="row row-2">
  <div class""square">square 4</div>
  <div class""square">square 5</div>
  <div class""square">square 6</div>
</div>

On mobile devices, I need to rearrange the squares so that the first two squares from each row are in the top row, and the last square from each row is in the bottom row. It should look like this:

<div class="row row-1">
  <div class""square">square 1</div>
  <div class""square">square 2</div>
  <div class""square">square 4</div>
  <div class""square">square 5</div>
</div>
//some more html
<div class="row row-2">
  <div class""square">square 3</div>
  <div class""square">square 6</div>
</div>

What would be the most efficient way to achieve this? I'm considering using jQuery to detect screen size and move the squares accordingly, but I'm open to other suggestions.

Appreciate any help!

html jquery css

Answer 1

Answer №1

Transferring elements between wrappers using CSS alone is not possible, so JavaScript becomes the only viable option. However, it may be feasible to achieve the desired result by utilizing CSS-Grid, depending on the structure of your additional HTML content.

One approach could involve utilizing display:contents to separate the wrappers and then employing CSS-Grid to position the relevant child elements...

It's important to note that this solution is quite specific and hinges on the specifics of the extra HTML content. For the purposes of illustration, let's assume it consists of a single div element.

.row {
  display: contents;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.row-2 :nth-child(1),
.row-2 :nth-child(2) {
  grid-row: 2;
}

.content {
  grid-row: 3;
  grid-column: span 2
}

div {
  outline: solid 1px lightgrey;
}

<div class="row row-1">
  <div class "square">square 1</div>
  <div class "square">square 2</div>
  <div class "square">square 3</div>
</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod unde doloremque eum incidunt provident pariatur fugiat repellendus iste, vitae excepturi temporibus, illo voluptates rerum assumenda quo corrupti sapiente odit, labore tenetur dignissimos!
  Culpa, aliquam unde!</div>
<div class="row row-2">
  <div class "square">square 4</div>
  <div class "square">square 5</div>
  <div class "square">square 6</div>
</div>

Answer 2

Transferring elements between wrappers using CSS alone is not possible, so JavaScript becomes the only viable option. However, it may be feasible to achieve the desired result by utilizing CSS-Grid, depending on the structure of your additional HTML content.

One approach could involve utilizing display:contents to separate the wrappers and then employing CSS-Grid to position the relevant child elements...

It's important to note that this solution is quite specific and hinges on the specifics of the extra HTML content. For the purposes of illustration, let's assume it consists of a single div element.

.row {
  display: contents;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.row-2 :nth-child(1),
.row-2 :nth-child(2) {
  grid-row: 2;
}

.content {
  grid-row: 3;
  grid-column: span 2
}

div {
  outline: solid 1px lightgrey;
}

<div class="row row-1">
  <div class "square">square 1</div>
  <div class "square">square 2</div>
  <div class "square">square 3</div>
</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod unde doloremque eum incidunt provident pariatur fugiat repellendus iste, vitae excepturi temporibus, illo voluptates rerum assumenda quo corrupti sapiente odit, labore tenetur dignissimos!
  Culpa, aliquam unde!</div>
<div class="row row-2">
  <div class "square">square 4</div>
  <div class "square">square 5</div>
  <div class "square">square 6</div>
</div>

Answer 3

Answer №2

If you're looking to simplify your layout and utilize flexbox, you can achieve the desired result by consolidating your div containers into one. By utilizing a media query, you can easily adjust the order of elements on the page.

Check out this fiddle for example

.main-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.main-container .item:nth-child(1) {
  order: 1;
}

.main-container .item:nth-child(2) {
  order: 2;
}

/* Additional item order styles go here */

.item {
  background-color: purple;
  color: #000;
}

.square {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1%;
  background-color: black;
  color: #fff;
}

<div class="main-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

Answer 4

If you're looking to simplify your layout and utilize flexbox, you can achieve the desired result by consolidating your div containers into one. By utilizing a media query, you can easily adjust the order of elements on the page.

Check out this fiddle for example

.main-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.main-container .item:nth-child(1) {
  order: 1;
}

.main-container .item:nth-child(2) {
  order: 2;
}

/* Additional item order styles go here */

.item {
  background-color: purple;
  color: #000;
}

.square {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1%;
  background-color: black;
  color: #fff;
}

<div class="main-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

Is it possible to reorganize several divs for mobile screens?

Answer №1

Answer №2

Similar questions

Modify input text using jQuery when a radio button is selected from multiple forms on a single page

Button group malfunctions on smaller screens

Switch up your code and toggle a class on or off for all elements that share a specific class

Make the child element's height 100% when the parent's width is not set

Is it possible to have Mobile WebKit store the click position?

Having trouble with uploading images?

Elevating the Sidebar: Transforming Bootstrap 4 Sidebar into a Top

Step-by-step guide on crafting a background design similar to the one depicted in the image

jQuery is unable to locate the FireBreath object

Jquery onchange event fails to fire

CSS containers not lining up correctly

Implementing CSS classes onto HTML elements following their retrieval from a database

When attempting to choose two dates within this application, an error is encountered stating that the datepicker function is not recognized

CSS HTML parent div cannot contain image properly

Execute a callback for each item within a when().then() block

Reordering script files in Yii is possible by changing the order in which they

Instead of providing proper JSON, the system is giving back [object, Object]

Arrangement of items in a grid featuring a row of three items, each with an automatic width

Instructions on setting a photo as a background image using a text-based model

What causes bubbling among a parent's siblings?