css - 固定宽度的右浮动 div 是否低于其他内容？

Question

我有一个两列布局，左侧列的大小灵活，但右侧列的宽度固定。当您调整浏览器大小时，左手栏会缩小以让右手栏始终适合。

然而，在设定的大小下，当左列达到最小宽度(由窗口的整体宽度决定)时，我们需要使用媒体查询堆叠列，以便它们可以取消 float 并填充空间对他们可用。

问题是，当发生这种情况时，由于必须编写标记的方式，右侧列会出现在左侧列上方。我需要右侧栏(包含不太重要的信息)在较小屏幕上位于左侧栏下方。

是否可以让右栏自然地落在左栏下方？是通过在标记中进一步实现尺寸效果，还是通过一些纯 CSS 解决方案？

我不想不得不求助于 javascript 来更改元素顺序，如果可能的话，我真的不想让具有相同内容的重复 div 来隐藏/取消隐藏，但是我知道如果那是唯一可行的解​​决方案。

这里有一个 fiddle 演示:http://jsfiddle.net/jmxu2/

<div class='column-contain'>
  <div class='c-right'>
      The right floated div is secondary content, but fixed width.  It should drop below the primary content when there isn't enough room.
  </div>
  <div class='c-left'>
      This left div is primary content, but non fixed in size.  When there isn't enough room to nicely display side by side, this div should be on top.
  </div>
</div>

Answer 1

右边的列将出现在顶部，因为它在 HTML 中排在第一位。如果无法对 HTML 中的元素重新排序，请尝试将以下内容添加到您的媒体查询中:

.c-left  {display: table-header-group; }
.c-right {display: table-footer-group; } 

这会将具有这些类的每个元素放在一个伪表中，并相应地在流中重新排序它们。显示为页眉的元素出现在显示为页脚的元素之上。