浮动固定右侧边栏的流体布局

Question

我尝试使用浮动的固定大小的右列创建流体布局。如果固定尺寸的右列div位于流体div之后，固定尺寸会被推下。我想在我的html中维护div的顺序以获得响应式布局。

＆＃13;

＆＃13;

.wrap      { margin: 20px; padding: 20px; background: cyan; }
.main      { margin-right: 220px; background: lightGray;}
.sidebar   { width: 200px; float: right; background: yellow;}
.main,
.sidebar   {  min-height: 100px; }

＆＃13;

    <div class="wrap">
        <div class="sidebar">Fixed-Width Sidebar is First in HTML</div>
        <div class="main">Fluid Main Content is Second in HTML</div>
    </div>

<div class="clear"></div>

    <div class="wrap">
        <div class="main">Fluid Main Content is First in HTML</div>
        <div class="sidebar">Fixed-Width Sidebar is Second in HTML</div>
    </div>

＆＃13;

＆＃13;

＆＃13;