Html 是否有一种响应方式来实现此设计？

我想知道实现这个设计的最佳方法是什么，我想应该是以一种响应的方式。这是一个模型。注意我漂亮的蓝色方块

现在，这是“移动”版本。当宽度减小到蓝色方块无法容纳的位置（同时保持其大小）时，它应该下降到三个其他内容块的下方

---

我认为这将是完全直截了当的，如果蓝色方块在它的左边立即下降到方块下面，但这不是客户想要的。如何实现这一点？

对于蓝色块，您可以在高分辨率屏幕上使用

浮动：右

，在低分辨率屏幕上使用

显示：表尾组

，这样您就不需要移动蓝色块或使用隐藏克隆

例如：

---

基本标记

<main>

  <aside><div>1</div></aside>
  <section>2</section>
  <section>3</section>
  <section>4</section>

</main>

---

视口<600px上的屏幕截图

视口上的屏幕截图>600px

---

---

注意：

display:table-*

在所有浏览器上都得到了很好的支持，包括IE8+这将为您提供一个良好的起点，利用

order

设置订单元素显示：

HTML:

---

使用媒体查询可以看到从绝对位置到相对位置的旧位置开关如何

<div class="content">
    <div class="block block1">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block block3">4</div>
</div>

你可以使用

（使用@fabrizio中的html元素）

main{
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
}
旁白{
宽度：100px；
顺序：4；
背景：浅蓝色
}
部分{
宽度：100%；
}
章节：第一个孩子{
flex:10px
}
@媒体屏幕和屏幕（最小宽度：700px）{
旁白{
订单：0
}
}
/*下一条规则仅用于演示*/
主要>*{
填充：10px；
最小高度：100px；
边框：1px实心#ddd；
利润率：10px；
}

第1节的内容
第2条的内容
第3节的内容
第4节的内容

Flexbox、媒体查询、不同媒体大小的不同订购规则。您能提供块的基本标记吗？它们都是s吗？你试过下面的一些答案吗？非常好-首先是为了更轻的负载。美好的我喜欢这是多么简洁。

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

 div {
    background:lightblue;
    height:100px;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    box-sizing:border-box;
    margin:10px;
    overflow:hidden;
}
div:nth-child(2) {
    width:calc(100% - 130px);
}
div:nth-child(1) {
    background:lightgrey;
    float:right;
    width:100px;
    margin:0 10px 0 0;
}
@media screen and (max-width: 500px) {
    body {
        display:flex;
        flex-flow: column;
        text-align:center;
    }
    div, div:nth-of-type(1) {
        margin-left: auto;
        margin-right: auto;
    }
    div:nth-of-type(1) {
        order:4;
        float:none;
    }
    div:nth-of-type(2) {
        order:1;
    }
    div:nth-of-type(3) {
        order:2;
    }
    div:nth-of-type(4) {
        order:3;
    }
}

<div class="content">
    <div class="block block1">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block block3">4</div>
</div>

.content {
    margin: 0 auto;
    max-width: 800px;
    position: relative;
}
.block {
    box-sizing: border-box;
    border: 1px solid red;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.block1 {
    width: 75%;
}
.block3 {
    width: 25%;
    position: absolute;
    right: 0;
    top: 0;
}
@media all and (max-width: 350px) {
    .block1 {
        width: auto;
    }
    .block3 {
        width: auto;
        position: relative;
}