html - CSS flexbox 3 boxes - 一个侧边栏

Question

用 flexbox 可以实现这样的效果:

http://i.stack.imgur.com/dmvZN.png (我不能直接放图片。。。)

具有该结构:

<main>
  <section class="Div1">
  </section>
  <section class="Div2">
  </section>
  <aside class="Div3">
  </aside>
</main>

?

我可以更改内部元素的顺序，但我不能添加任何其他元素(例如 Div1 和 Div2 的包装，这将解决问题)。

我想更改移动设备的元素顺序(1 和 2 之间的 Div3)，但对于更高的分辨率，我需要侧边栏...

谢谢!

Answer 1

您如何看待仅使用 flexbox 在移动设备上对 block 进行排序以及在没有它的情况下构建更高分辨率的布局？

What I suggest on jsfiddle.net .

main {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.Div1 {order: 1;}
.Div2 {order: 3;}
.Div3 {order: 2;}

@media (min-width: 768px) {
    main {
        display: block;
    }
    main:after {
        display: block;
        content: '\0020';
        clear: both;
    }
    .Div1, .Div2 {
        width: 60%;  
        float: left;
    }
    .Div3 {
        margin-left: 60%;
    }
}