Html 三列响应式布局，顶部div位于大屏幕中央

我正在尝试创建一个响应性强的布局，其中最大尺寸有三列。在移动设备上，所有东西都将堆叠在一起：

在较大的屏幕上，将有两列。我希望第一个div位于第二列：

在最大的屏幕上，最后一个div将位于第三列和最顶部：

我已经准备了一个代码笔来展示我所拥有的，但我似乎无法让最后一个div在最大的屏幕上显示

我试图避免使用flexbox或任何在IE9中不起作用的东西。同时避免绝对或相对定位，将最后一个框向上推，因为每个区域的内容长度会因页面而异，我不想遇到任何溢出问题

有什么建议吗

HTML:

---

你试过使用twitter引导吗？ 它有自己的响应api，允许您无需编写太多代码即可完成类似的工作。 此外，它在IE9和其他浏览器上也是可以接受的。 它帮助您为三个预定义的屏幕大小构建响应站点，您可以在css文件中根据自己的意愿覆盖这些屏幕大小。 您可以从以下站点获取引导：

---

您的第一和第二个区块交换订单，以及您的第四个区块交换到第三个位置。因此，从根本上说，您不能使用典型的响应式设计。然而，这个问题仍然可以通过复制橙色和红色字段来解决。如果您使用的是模板系统，这实际上非常简单

你可以这样想：

block 1- orange1
block 2- blue
block 3- orange2
block 4- red1
block 5- green
block 6- red2

我的建议是重新设计页面以适应浏览器流。但如果这就是你所看到的设计，那么这里有一种方法：

您的html看起来像这样（假设为html5）

---

给出或接受一些错误，此代码仅供参考。

它似乎对我有用。到底是什么问题？同样值得注意的是，对于

@媒体（最小宽度：400px）

您有

。主要内容

两次。您是否考虑过使用像Bootstrap这样的响应框架？他们已经解决了所有这些问题，并使其变得非常简单。@imtheman我似乎无法让最后一个div捕捉到容器的顶部。您查看过flexbox吗？

.main{
  width:100%;
  max-width:1000px;
  margin:auto;

  @media (min-width:400px) {
    .breadcrumbs{
      float:right;
       width:80%;
    }

    .left-sidebar{
      float:left;
      width:20%;
    }

    .main-content{
      width:80%;
      float:right;
    }
  }

  @media (min-width:700px) {
      .breadcrumbs{
        float:right;
        width:60%;
        margin-right:20%;

      }

      .main-content{
        width:100%;
        float:none;
      }
      .main-content{
        width:60%;
        float:left

      }
      .right-sidebar{
        width:20%;
        float:left;
      }
  }

}

.breadcrumbs{
   background-color:#FF9D5E;
}

.left-sidebar{
  background-color:#CEE7EA;
}

.main-content{
  background-color:#94BC6C;
}

.right-sidebar{
  background-color:#FEA9A1;
}

block 1- orange1
block 2- blue
block 3- orange2
block 4- red1
block 5- green
block 6- red2

<nav class="orange1"></nav>
<section class="blue"></section>
<aside class="red1"></aside>
<nav class="orange2"></nav>
<section class="green"></section>
<aside class="red2"></aside>

.orange1,.red2 {
    display:none;
}
.blue {
    float:left;
    width:200px;
}
.red1 {
    float:right;
    width:200px;
}
.orange2,.red2 {
    width:100%;
}

@media (max-width:700px;) {
    .red1 {
        display:none;
    }
    .red2 {
        display:block;
    }
}

@media (max-width:400px;) {
    .orange1 {
        display:block;
    }
    .orange2 {
        display:none;
    }
    .blue {
        float:none;
        width:100%;
    }
}