2

Как вывести один элемент в разных блоках в зависимости от ширины страницы? Пример: Пример

Не хочется делать 2 одинаковых блока и скрывать, т.к. часто привязка идет по id + javascript. Некоторые блоки, типа фильтра, тяжелые, не хочется их несколько раз генерировать. Какие вообще есть варианты решения подобных проблем?

2
  • А чем bootstrap не вариант? разве не катит? getbootstrap.com/css
    – Torba
    2 июн 2016 в 13:55
  • 1
    в этом случае отлично подходит flex box , и говорить о том что оно на данный момент не кроссбраузерно - ошибка
    – user33274
    2 июн 2016 в 14:20

2 ответа 2

1

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

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


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, а встаёт на ряд раньше его. Бутстрап, например, меняет порядок колонок только в пределах одного ряда.

Но если подобрать высоту и ширину блоков, то можно схитрить:

  1. Завернуть Logo и Top Menu в общий блок. Поскольку меню шире логотипа, у этого блока правый нижний угол будет пустым.
  2. Для 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>

0
-2

сделать два класса со стилями для больших и маленьких экранов, а на js проверять ширину и присвоить div'у нужный класс

1
  • На js проверять ширину!?!?!? а как же медиа запросы?!!
    – NeedH8
    3 июн 2016 в 10:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.