Порядок источника Foundation5: контент против боковой панели

Question

У меня есть выложенная структура с тремя столбцами в ZURB Foundation 5, две из которых являются боковыми панелями (слева и справа), а средняя - основной областью контента.

Я поиграл с инструкциями по упорядочению исходного кода, но у меня были некоторые проблемы.

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

Это вид рабочего стола и структура:

и вот как я хочу, чтобы это выглядело на мобильном телефоне:

Кто-нибудь знает, как мне этого добиться? Заранее спасибо.

Answer 1

Это было бы

<div class="row">
  <div class="small-12 medium-6 medium-push-3 columns">Main</div>
  <div class="small-12 medium-3 medium-pull-6 columns">Left Sidebar</div>
  <div class="small-12 medium-3 columns">Right Sidebar</div>
</div>

Первый ответ нужно использовать medium-push-3 вместо medium-push-6 а также medium-pull-6 вместо medium-pull-3,

Answer 2

Вы можете использовать исходный порядок Foundation, чтобы изменить порядок в разных точках останова.

Ваш HTML будет выглядеть примерно так:

<div class="row">
  <div class="small-12 medium-6 medium-push-6 columns">Main</div>
  <div class="small-12 medium-3 medium-pull-3 columns">Left Sidebar</div>
  <div class="small-12 medium-3 columns">Right Sidebar</div>
</div>

Вот демо.