Отзывчивый вопрос - 3 расположение столбца

Question

Я работаю над созданием сайта для клиентов. Клиент хочет, чтобы левое меню опустилось вниз, когда сайт рухнул. Все страницы работают так, а вот пример:

Page working correctly

Однако, есть одна страница, 3 колонки (все остальные две колонки), которые не работают должным образом, и вот пример:

Not working correctly

Прямо сейчас структура страницы не работает правильно это:

<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> 

Затем я могу добавить поплавок: левый и ширина = 21% к # био-нав, а затем поплавок: прямо на два других div, и я получаю то, что хочу от краха, но выглядит ужасно на весь экран.

Как мне сделать эту работу так, чтобы столбец с навигацией рушился на дно, как на других страницах? Я готов реструктурировать вещи по мере необходимости. Благодаря!

EDIT: Я сделал небольшое изменение структуры и отрегулировал так, чтобы ширина была в процентах. В этот момент правая колонка отказывается разрушаться под центральной колонке на всех: Updated way site is collapsing

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 

Все, что после того, что ваш просто собирается возиться с это