html - 用于响应式布局的标记和 CSS， float div 与顶部对齐

Question

我有一个包含一系列组件(框)的网页。由于内容是动态的，因此每个组件的高度都可以变化。此外，组件应该是流动的(即宽度可以在一定程度上变化)。

问题是在桌面和智能手机上查看网页时我想要“不同的顺序”。

Smartphone    Desktop
┌───┐         ┌─────┬───┐
│ A │         │  A  │ B │
│   │         │     ├───┤
├───┤         ├─────┤ C │
│ B │         │  D  ├───┤
├───┤         ├─────┤ E │
│ C │         │  F  │   │
├───┤         ├─────┤   │
│ D │         │  G  ├───┘
├───┤         └─────┘
│ E │        
│   │        
│   │        
├───┤        
│ F │        
├───┤        
│ G │        
└───┘        

基本上，当用户查看桌面版本时，我想将一些组件“ float ”到右侧，将一些组件“ float ”到左侧。我想要另一个移动版本的“订单”。

我已尝试将简单的“float: right”和“float: left”与两种分辨率的媒体查询相结合，但这会导致布局中出现垂直间隙，如下图所示:http://jsfiddle.net/VgG55/10/用于 this StackOverflow question .

为了实现这一点，应该使用什么样的标记(div、包装等的顺序)以及“宽”和“窄”版本的 CSS 是什么样的？

请注意，一个 JS 解决方案，例如 http://masonry.desandro.com/不能使用。这应该是纯 HTML/CSS(如果可能)。此外，该网站应该适用于 IE9+ 和现代版本的 Firefox/Chrome/Safari/Opera。

Answer 1

这是我能想到的最接近的: http://jsfiddle.net/VgG55/11/

请注意，我必须更改 div 的顺序并包含在 span 中:

<span class="wide">