响应式问题-3列布局

Question

我一直在努力使网站能够为客户做出响应。 客户希望在网站崩溃时将左侧菜单放到底部。 所有页面都以这种方式工作，这是一个示例：

页面正常工作

但是，有一页包含3列（其余均为两列）的页面无法正常工作，下面是示例：

无法正常运作

现在，该页面的结构无法正常工作：

<div class="content-column-left" id="bio-nav"></div>
<div class="content-column-center"></div>
<div class="content-column-right"></div>

我已经注意到，如果我重新排列开发人员工具中的列，以便它们像这样放置：

<div class="content-column-center"></div>
<div class="content-column-right"></div>
<div class="content-column-left" id="bio-nav"></div>

然后，我可以向＃bio-nav添加一个float：left和width = 21％，然后向其他两个div添加一个float：right，我得到我想要的折叠效果，但是在全屏下看起来很糟糕。

我该如何做才能使带有导航的那列像其他页面一样折叠到底部？ 我愿意根据需要重组事物。 谢谢！

编辑：我对结构做了很小的改动，并进行了调整，使宽度为百分比。 在这一点上，右列完全拒绝在中心列下方塌陷： 更新的站点正在塌陷

Answer 1

在该页面上，标记必须如下：

<div class="content-column-right content-body content-right-team-member"></div>
<div class="content-column-center content-body content-body-team-member"></div>
<div class="content-column-left" id="bio-nav></div>

Then
    .content-column-right
needs to be 
    float:right

Then
    .content-column-center
needs to be
    float:right

Then (I think this one is okay as is)
    .content-column-left
needs to be:
    float: left

在那之后的任何事情你都将不得不去搞砸