So I have a complicated setup.

I have 2 rows of three divs on large devices.

Similar to.

<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>

When viewed on mobile I need to have the first 2 squares of each row in the top row. And the last square of each row in the bottom row. So it would like like the below

<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 is the best way to do this? I was thinking of using jquery to detect screen size and just moving the squares, but is this easiest?

Thanks

CodePudding user response：

You can't move elements from one wrapper to another with CSS so JS would be your only option. You might be able to do something with CSS-Grid but it will depend on what your "more HTML" is.

For instance, leveraging display:contents to unbundle your wrappers and then using CSS-Grid to place the relevant children...

As I mentioned, this is highly specific and requires details of the "more HTML" which I have assumed for the sake of this example is a single div.

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could try doing something like this using flex box. This would mean removing the row div containers and just having one container. You would trigger the order css with a media query of course.

Link to fiddle

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

.cont-2 .square:nth-child(1) {
  order: 1;
}

.cont-2 .square:nth-child(2) {
  order: 2;
}

.cont-2 .square:nth-child(3) {
  order: 5;
}

.cont-2 .square:nth-child(4) {
  order: 3;
}

.cont-2 .square:nth-child(5) {
  order: 4;
}

.cont-2 .square:nth-child(6) {
  order: 6;
}

.cont-2 .square {
  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="cont cont-1">
  <div class="square">square 1</div>
  <div class="square">square 2</div>
  <div class="square">square 3</div>
  <div class="square">square 4</div>
  <div class="square">square 5</div>
  <div class="square">square 6</div>
</div>

<div class="cont cont-2">
  <div class="square">square 1</div>
  <div class="square">square 2</div>
  <div class="square">square 3</div>
  <div class="square">square 4</div>
  <div class="square">square 5</div>
  <div class="square">square 6</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>