Подтвердить что ты не робот

Bootstrap - изменение порядка строк и столбцов

Используя Bootstrap, возможно ли иметь эти два разных макета в зависимости от видового экрана? Я искал об этом, и я знаю понятия push, pull и отзывчивые утилиты, но примеры, которые я нашел, имели более простые структуры.

В этом случае я предпочитаю не использовать отзывчивые утилиты (потому что будет много повторной обработки) и/или JavaScript, просто HTML и CSS-манипуляции.

Здесь скрипка с неправильным расположением на смартфонах...

<div class="row">
  <div class="col-sm-4 elA">Title A</div>
  <div class="col-sm-4 elB">Title B</div>
  <div class="col-sm-4 elC">Title C</div>

  <div class="col-sm-4 elA">Graph A</div>
  <div class="col-sm-4 elB">Graph B</div>
  <div class="col-sm-4 elC">Graph C</div>

  <div class="col-sm-12 elA">List A</div>
  <div class="col-sm-12 elB">List B</div>
  <div class="col-sm-12 elC">List C</div>
</div>

Планшетные ПК и настольные компьютеры

Tablets and desktops layout

Расположение смартфонов

enter image description here

4b9b3361

ОТВЕТЫ

Ответ 1

Я нашел этот вопрос сегодня и не видел такого ответа, который бы удовлетворял OP и будущих посетителей этого сообщения. Таким образом, решил ответить на него с текущей версией bootstrap 4:

<div class="row">
  <div class="col-12 col-md-4 order-1">
    <div class="m-3 bg-warning">Title A</div>
  </div>
  <div class="col-12 col-md-4 order-4 order-md-2">
    <div class="m-3 bg-success">Title B</div>
  </div>
  <div class="col-12 col-md-4 order-7 order-md-3">
    <div class="m-3 bg-info">Title C</div>
  </div>
  <div class="col-12 col-md-4 order-2 order-md-4">
    <div class="m-3 bg-warning">Graph A</div>
  </div>
  <div class="col-12 col-md-4 order-5 order-md-5">
    <div class="m-3 bg-success">Graph B</div>
  </div>
  <div class="col-12 col-md-4 order-8 order-md-6">
    <div class="m-3 bg-info">Graph C</div>
  </div>
  <div class="col-12 order-3 order-md-7">
    <div class="m-3 bg-warning">List A</div>
  </div>
  <div class="col-12 order-6 order-md-8">
    <div class="m-3 bg-success">List B</div>
  </div>
  <div class="col-12 order-9">
    <div class="m-3 bg-info">List C</div>
  </div>
</div>

Здесь demo для начальной загрузки 4 порядка строк и столбцов. Надеюсь, вы сможете управлять упорядочением столбцов в bootstrap 3, если вы работаете над ним.

Ответ 2

Существует 2 решения без использования Javascript

Первый вариант:

Список элементов использует классы адаптивной утилиты

http://getbootstrap.com/css/#responsive-utilities

Проверьте этот пример: http://jsfiddle.net/ppollono/mehfb6p0/12/

Для списка в первой строке

class="visible-xs"

Для списка внизу

class="hidden-xs"

CONTS: список элементов дублируется

Второй вариант:

Использовать отображение Flex

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Проверьте этот пример: http://codepen.io/Palapas/pen/LVvbyW?editors=110

.row {
  margin: 0px;
  padding: 0px;
  background: #999;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.row div {
  padding: 5px;
  margin: 5px;
  border: 1px solid #000;
  border-radius: 3px;
  width: 100%;
}
.elA {
  background-color: #E99048;
}
.elB {
  background-color: #B0C07E;
}
.elC {
  background-color: #B0B9DC;
}
@media (min-width: 768px) {
  .row .et {
    -webkit-order: 1;
    order: 1;
    width: 30%;
  }
  .row .eg {
    -webkit-order: 2;
    order: 2;
    width: 30%;
  }
  .row .el {
    -webkit-order: 3;
    order: 3;
  }
}
<div class="row">
  <div class="et elA">Title A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium.</div>
  <div class="eg elA">Graph A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat. Ut nec arcu nunc.
  </div>
  <div class="el elA">List A
    <br>
    <ul>
      <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li>
      <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
      <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
      <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
    </ul>
  </div>
  <div class="et elB">Title B: Integer et fermentum leo.
  </div>
  <div class="eg elB">Graph B</div>
  <div class="el elB">List B
    <br>
    <ul>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
      <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li>
      <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
      <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
      <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
      <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li>
      <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
      <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li>
    </ul>
  </div>
  <div class="et elC">Title C: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat.</div>
  <div class="eg elC">Graph C</div>
  <div class="el elC">List C
    <br>
    <ul>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet,
    </ul>
  </div>
</div>

Ответ 3

Вероятно, бит опоздал на вечеринку, но вы можете легко исправить это с помощью некоторых строк css и flexbox. Я не знаю, дает ли загрузочный файл что-то подобное.

.row {
    display: flex;
    flex-flow: row wrap;
}

.row > div {
    width: 100%;
}

.elA {
    order: 1;
}

.elB { 
    order: 2;
}

.elC {
    order: 3;
}

Пример: https://jsfiddle.net/t284d3mg/

Flexbox прекрасно объясняется в MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Помните, что более старый браузер не поддерживает flexbox, имеет старую спецификацию или вам нужно добавить префиксы.

Ответ 4

Это то, что вы ищете? https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Я все время использую медиа-запросы для таких вещей.

Я могу использовать его двумя способами. сначала определите таблицу стилей:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

Во-вторых, определите медиа-запрос в таблице стилей:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Надеюсь, я не понял ваш вопрос: D