How to control the location of blocks in adaptive layout?

Question

css

There are 3 blocks, they are all in a row. When resizing to a certain resolution, you need to take the center block and place it in front, the other two under it, like this:

Is it possible to implement this without flexbox?

Answer 1

css solution with media queries
link to example below
html:

<div class="box">
  <div class="block block_1">block # 1</div>
  <div class="block block_2">block # 2</div>
  <div class="block block_3">block # 3</div>
</div>

css:

.box{
  width: 400px;
  margin: 50px auto;
}

.box:before {
  background-color: rgb(100, 250, 100);
  display: block;
  content: "full";
}

.block {
  width: 33.3333%;
  height: 100px;
  border: 1px dotted black;
  box-sizing: border-box;
  display: inline-block;
}

.block_1 {
  float: none;
}

.block_2 {
  float: left;
}

.block_3{
  float: right;
}

@media (max-width: 600px) {
  .box:before {
    background-color: rgb(150, 150, 250);
    content: "mobile";
  }

  .block_1 {
    width: 100%;
  }

  .block_2 {
    width: 50%;
  }

  .block_3{
    width: 50%;
    float: left;
  }
}

codepen.io/iusfof/pen/Lmiep?editors=110 code in action

Answer 2

Implemented via CSS media. But it is still desirable to place the red block on the left.

Answer 3

If it is possible to change the markup, then put the red block first in the markup. This will greatly simplify the task.
If it is not possible to edit the markup, then through absolute positioning it is possible for the desired block, but this option should be used in extreme cases. Still, it is worth reconsidering the markup, as already mentioned.

Answer 4

add a block at the top with a height of 0px and in the middle (where red is in the 1st figure, also: at 0px) and, depending on the width, change the content output to one of these blocks via JS.
Mobile - bring to the top.
Regular - medium.