Красный блок перепрыгивает через ряд

1. flex
Меняем порядок блоков и их ширину.
https://jsfiddle.net/glebkema/96rmo9z4/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: white;
font-family: Helvetica, sans-serif;
font-size: 48px;
font-weight: bold;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
div[class|="block"] {
flex: 0 0 100%;
padding: 12px 20px;
}
.block-red, .block-yellow { height: 200px; }
.block-blue, .block-green { height: 400px; }
.block-blue { background-color: #60c; }
.block-green { background-color: #0c6; }
.block-red { background-color: #c06; }
.block-yellow { background-color: #ee3; }
.hidden-xs { display: none; }
@media (min-width: 768px) {
.block-blue, .block-yellow { flex: 2 2 66.66666667% !important; }
.block-red, .block-green { flex: 1 1 33.33333333% !important; }
.block-red { order: 1; }
.block-green { order: 2; }
.block-blue { order: 3; }
.hidden-xs { display: block; }
.visible-xs { display: none; }
}
<div class="container">
<div class="block-yellow">Top Menu</div>
<div class="block-green">Logo</div>
<div class="block-red">Cart</div>
<div class="block-blue hidden-xs">Main Menu</div>
<div class="block-blue visible-xs">Login</div>
</div>
2. float + margin
Трудность в том, что при переходе к широкому экрану Cart
не просто обгоняет Logo
, а встаёт на ряд раньше его. Бутстрап, например, меняет порядок колонок только в пределах одного ряда.
Но если подобрать высоту и ширину блоков, то можно схитрить:
- Завернуть
Logo
и Top Menu
в общий блок. Поскольку меню шире логотипа, у этого блока правый нижний угол будет пустым.
Для Top Menu
задать отрицательный margin-left
, чтобы оно наложилось сверху и заслонило собой пустой угол добавленного блока.
https://jsfiddle.net/glebkema/hpouarzy/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: white;
font-family: Helvetica, sans-serif;
font-size: 48px;
font-weight: bold;
margin: 0;
}
div[class|="block"] {
padding: 12px 20px;
}
.block-red, .block-yellow { height: 200px; }
.block-blue, .block-green { height: 400px; }
.block-blue { background-color: #60c; }
.block-green { background-color: #0c6; }
.block-red { background-color: #c06; }
.block-yellow { background-color: #ee3; }
.hidden-xs { display: none; }
@media (min-width: 768px) {
.nest, .block-red, .block-blue { float: left; }
.nest { width: 66.66666667%; }
.block-blue { width: 66.66666667%; margin-left: -33.33333333%; }
.block-red { width: 33.33333333%; }
.block-green { width: 50%; }
.hidden-xs { display: block; }
.visible-xs { display: none; }
}
<div class="nest">
<div class="block-yellow">Top Menu</div>
<div class="block-green">Logo</div>
</div>
<div class="block-red">Cart</div>
<div class="block-blue hidden-xs">Main Menu</div>
<div class="block-blue visible-xs">Login</div>
3. тот же вариант для бутстрапа
https://jsfiddle.net/glebkema/27ax3csa/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
body {
color: white;
font-family: Helvetica, sans-serif;
font-size: 48px;
font-weight: bold;
}
.block-red, .block-yellow { height: 200px; }
.block-blue, .block-green { height: 400px; }
.block-blue { background-color: #60c; }
.block-green { background-color: #0c6; }
.block-red { background-color: #c06; }
.block-yellow { background-color: #ee3; }
@media (min-width: 768px) {
.block-blue {
margin-left: -33.33333333%;
width: 66.66666667% !important;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12 block-yellow">Top Menu</div>
<div class="col-sm-6 block-green">Logo</div>
</div>
</div>
<div class="col-sm-4 block-red">Cart</div>
<div class="col-sm-4 block-blue hidden-xs">Main Menu</div>
<div class="col-xs-12 block-blue visible-xs-block">Login</div>
</div>
</div>