Struktura dokumentu a RWD

Dla specjalistów Programowanie
#1

Witam, mam następujący markup:

<div class="group-wrapper">

  <div class="container">

	 <nav class="navigation">

            <i class="fa fa-bars" aria-hidden="true"></i>

        </nav>

        <header class="header">

            <h1>LOGOTYP</h1>

        </header>

        <div class="login-panel">

            <i class="fa fa-user-o" aria-hidden="true"></i>

        </div>

    </div> <!-- END OF CONTAINER -->

</div> <!-- END OF GROUP-WRAPPER -->

Do rozdzielczości 768px, chcę przycisk od menu wyświetlić po lewej stronie, logo wyśrodkowane, a panel logowania po prawej (to mam). Po przekroczeniu tej szerokości chciałbym po lewej mieć logo, a menu na środku… Jak przestawić te elementy?

#2

Pytasz o konkretne ułożenie DIV-ów i CSS-y czy o to, jak doprowadzić, żeby różne ustawienia były używane przy różnych rozdzielczościach?

#3

Ułożenie divów. 

 

Na jednej rozdzielczości (mobilnej) chcę przycisk od menu (bars) po lewej stronie ekranu, a na desktopowej chcę menu na środku (HEADER zamienia się miejscem z NAV). Pytanie => jak to wypozycjonować? 

#4

 

Jeśli nie możesz zmienić markupu to zastosuj display: flex dla kontenera, przykład:

.container {

	display: flex;

	flex-flow: row nowrap;

	justify-content: space-between;

}



.navigation {

	background: red;

	order: 2;

	width: 30%;

}



.header {

	background: green;

	order: 1;

	width: 30%;

}



.login-panel {

	background: blue;

	order: 3;

	width: 30%;

}





@media (max-width: 768px) {



.navigation {

	order: 1;

}



.header {

	order: 2;

}



.login-panel {

	order: 3;

}





}

 

Jeśli możesz …navigation i .header wziąść w dodatkowego diva to wtedy wystarczy zwykłe float: left i float: right w różnych rozdzielczościach.

 

#5

Oczywiście, że mogę ale najpierw spróbuję z flexem. Dzięki!