0

Нужно на моб. устройствах поменять блоки местами. Можно ли средствами bootstrap или юзать js?

3
  • Нужно чтобы блок, который находится снизу, был сверху. 7 июл 2016 в 7:42
  • Уточните вопрос. У вас адаптивная верстка и нужно, чтобы на мобильных устройствах, блок который был сверху переехал вниз, или же пользователь сам меняет положение блоков?
    – Astor
    7 июл 2016 в 7:47
  • Можно и бутстрап, и js, и с помощью flexов сделать.
    – Moonvvell
    7 июл 2016 в 7:48

2 ответа 2

2

Вариант с помощью flexbox, изменяйте ширину окна браузера и увидите, как элементы будут меняться.

.wrap {
  display: flex;
  flex-flow: column wrap;
}
.one {
  order: 2;
  background: green;
}
.two {
  order: 1;
  background: purple;
}
@media (min-width: 500px) {
  .one {
    order: 1;
  }
  .two {
    order: 2;
  }
}
<body>
  <div class="wrap">
    <div class="one">One</div>
    <div class="two">Two</div>
  </div>
</body>

0

bootstrap - column ordering

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-md-push-6 col-sm-push-6">
      <h2>block 2</h2>
    </div>
    <div class="col-md-6 col-sm-6 col-md-pull-6 col-sm-pull-6">
      <h2>block 1</h2>
    </div>
  </div>
</div>

Ваш ответ

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

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