Переупорядочение колонок с Thoughtbot Bourbon / Neat
Я искал лучшее решение о том, как переупорядочить / сместить положение столбцов в разных точках останова, используя сетчатый каркас Thoughtbot Neat?
Я хотел бы переместить элементы в моем заголовке из этого (в разрешении рабочего стола):
на это (в мобильном разрешении):
Мой HTML выглядит так:
<header>
<section id='header_elements'>
<p id="chocolat_logo"><strong><a href="#"><img alt="Chocolat Restaurant Logo" itemprop="logo" src="/assets/main_logo.png" /></a></strong></p>
<nav>
<ul>
<li id='home_link'>
Home
</li>
<li id='menus_link'>
<a href="/menus/evening" itemprop="menu">Menus</a>
</li>
<li id='drinks_link'>
<a href="/menus/wine-list" itemprop="menu">Drinks</a>
</li>
<li id='contact_link'>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
<ul id='top_contact_details'>
<li class='social_link' id='twitter_link'>
<a href='twitter'>
Twitter
</a>
</li>
<li class='social_link' id='facebook_link'>
<a href='facebook'>
Facebook
</a>
</li>
<li id='top_phone''>
<span>
(061)
</span>
412 888
</li>
</ul>
</section>
</header>
и SCSS выглядит примерно так (для ясности я удалил все, что не было связано с фактическим макетом, если это уместно, я поместил полный код SCSS для этого заголовка наэтот смысл):
header{
@include outer-container;
#header_elements{
width: 100%;
height: 100%;
// LOGO
#chocolat_logo{
float: left;
@include span-columns(3);
@include media($mobile) {
float: left;
@include span-columns(6);
}
}
// Main Navigation
nav{
@include media(min-width 480px){
@include span-columns(6);
}
@include media($mobile) {
@include fill-parent();
}
}
//Contact Details
#top_contact_details{
@include span-columns(3);
@include media($mobile) {
@include span-columns(6);
}
}
}
}
Я в основном хочу узнать, какой лучший / самый элегантный способ подражать ЗурбуПуш-пул функции повторного заказа Фонда в бурбоне / аккуратный
Большое спасибо за любое предложение / помощь!