Html 基础-根据基础断点重组块

这里是我尝试做的粗略缩放：

如您所见，我想用我的三个模块创建几个“组织”：

• 在大的屏幕（和更大的屏幕）上，我希望它们彼此相邻
• 在Medium屏幕上，我希望第一个和第三个块位于同一行，第二个块位于另一行
• 在小的屏幕上，我希望每个屏幕都比另一个屏幕低

因此，问题出现在中等屏幕上，第三个块需要在第二个块之前

为了解决这个问题，我将第三个块放了两次：

• 第一个块和第二个块之间的一个（类规则为“仅显示介质”）
• 第二个块后的另一个块（使用类规则“仅对介质隐藏”）

这给了我这个html（你可以看到它的作用）：

1.
3.
2.
3.

所以我的问题是：有没有办法在不重复第三个区块的情况下实现这一点？（<强>不使用JavaScript < /强>，最好使用本机基础规则）

，可以使用或删除文档流中的元素，并用CSS和一些HTML样板对它们进行排序：

html:

默认基础5设置的P>或CSS输出：

.wrapper{
位置：相对位置；
保证金：自动；
最大宽度：62.5雷姆；
}
/*第11行，../scss/app.scss*/
.小组{
文本对齐：居中；
高度：1.5em；
字体大小：1000%；
颜色：白色；
}
/*第18行，../scss/app.scss*/
.首先{
背景色：#e64433；
}
/*第21行，../scss/app.scss*/
.第二{
背景色：#09afb9；
}
/*第24行，../scss/app.scss*/
.第三{
背景色：#ed9a24；
}
@仅介质屏幕和（最小宽度：64.063em）{
/*第30行，../scss/app.scss*/
.第1层、.第2层{
位置：绝对位置；
}
}
/*第35行，../scss/app.scss*/
.笨蛋{
显示：无；
}
@仅介质屏幕和（最大宽度：40em）{
/*第39行，../scss/app.scss*/
.第三栏{
位置：绝对位置；
}
/*第42行，../scss/app.scss*/
.笨蛋{
显示：块；
可见性：隐藏；
}
}
不是一个面向基础的答案，而是用<代码>显示：网格；
得到广泛支持，此解决方案应与任何CSS框架一起使用，并将使HTML更干净，CSS更灵活。不幸的是，如果不使用JavaScript，就无法做到这一点。解决这个问题的方法可能是最好的，因为你复制的div中没有太多的内容。你好，最好的方法是使用基础CSS中的@媒体（最小宽度）块。首先找到平板电脑的宽度，并在其中切换可见性级别，有效地允许您只制作一个html块。您可能希望为这个div定义一个特定的标记，因为它只会帮助在CSS中识别它。
<div class="row">
    <div class="small-12 medium-4 large-3 columns">
        <div class="panel">
            1
        </div>
    </div>

    <div class="show-for-medium-only medium-8 columns">
        <div class="panel">
            3
        </div>
    </div>

    <div class="small-12 medium-12 large-5 columns">
        <div class="panel">
            2
        </div>
    </div>

    <div class="hide-for-medium-only small-12 large-4 columns">
        <div class="panel">
            3
        </div>
    </div>
</div>

<div class="wrapper">
   <div class="row layer-1">
      <div class="small-12 medium-4 large-3 columns">
         <div class="panel first">
            1
         </div>
      </div>
      <div class="small-12 medium-8 large-4 large-offset-5 third-column  columns">
         <div class="panel dummy"></div>
         <div class="panel dummy"></div>
         <div class="panel third">
            3
         </div>
      </div>
   </div>
   <div class="row layer-2">
      <div class=" medium-12 large-5 large-offset-3 columns">
         <div class="panel second">
            2
         </div>
      </div>
   </div>
</div>