Bootstrap: Как изменить порядок div в строке жидкости?

Ответ 1

Новая версия Bootstrap v3 теперь поддерживает упорядочение столбцов:

Порядок столбцов

Легко изменить порядок наших встроенных столбцов сетки с помощью классов модификаторов .col-push-* and .col-pull-*.

 <div class="row">
  <div class="col-md-9 col-md-push-3">9</div>
  <div class="col-md-3 col-md-pull-9">3</div>
</div>

Выдает следующий порядок:

 ----------------------------
|     3     |      9       |
----------------------------

Документация: http://getbootstrap.com/css/#grid-column-ordering

Ответ 2

Вы должны иметь в виду, что сетка не поддерживает это по умолчанию, но есть способы справиться с этим.

Вы могли бы, например, инвертировать оба пролета (установить порядок мобильного вида) и принудительно установить нормальное позиционирование с помощью

<div class="row-fluid">
    <div class="span9 pull-right">
        <!-- ... -->
    </div><!--/span-->
    <div class="span3 pull-left">
        <!-- ... -->
    </div><!--/span-->
</div><!--/row-->

Затем элементы .span более или менее корректно изменяются для меньших экранов, но у вас все еще есть несколько правил для исправления этого поведения:

.row-fluid .pull-left[class*="span"]:last-child { margin-left: 0; }

@media (max-width: 767px) {
    .row-fluid .pull-right[class*="span"] { float: none; }
}

Если вы используете более двух столбцов, вам нужно будет отменить край элементов .pull-right (кроме последнего) - что-то вроде:

.row-fluid .pull-right[class*="span"] { margin-right: 2.5641%;margin-left: 0; }
.row-fluid .pull-right[class*="span"]:first-child { margin-right: 0; }

Live demo (jsfiddle) и полноэкранный режим (некоторые стили должны быть установлены между нормальным и отзывчивым, поэтому jsfiddle "взломать" в панели стилей)

Ответ 3

Если вы хотите, чтобы ваш бок-бар под вашим героем, но над другими вещами, это заняло некоторые манипуляции с dom, поскольку это не просто вопрос размещения списка до/после всего, а скорее между элементами. Что-то вроде этого должно работать:

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#sidebar").insertAfter($("#hero"));
    } else {
        $("#sidebar").prepend($("#containingrow"));
    }
});

Ответ 4

#wrapper {
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
}

#wrapper > div {
    width: 100%;
}

#header {
    order: 1;
    -webkit-order: 1;
}

#mainMenu {
    order: 2;
    -webkit-order:2;
}

#content {
    order: 3;
   -webkit-order:3;
}

#sidebar {
    order: 4;
    -webkit-order:4;
}

Источник: http://www.reddit.com/r/css/comments/1v1gv7/change_order_of_divs_with_css/

Ответ 5

Я работаю над плагином для сортировки и добавления элементов в сетки Bootstrap. Он очень грубый и хрупкий на данный момент, но если он используется только для основных функций, я считаю, что он выживет в производственной среде.

Плагин требует, чтобы сетки были согласованными, вся определенная ширина диапазона, но это могло бы помочь с этим.

Лучше всего выполнять весь этот вид работы до того, как разметка будет отображаться, но я использую Bootstrap в некоторых случаях, когда я не могу сортировать заранее из-за ограничений некоторых языков шаблонов, которые я вынужден использовать.

Github
Codepen

Ответ 6

Вы можете сделать это с помощью медиа-запросов, новой возможности, предлагаемой CSS3.

С помощью медиа-запросов вы можете создавать стили, которые применяются, например, только к определенным типам экранов. Если вы хотите сделать то, о чем говорите, вы могли бы что-то вроде:

@media only screen and (max-device-width: 480px) {
      .sidebar { width: 100%; bottom: 0%; blahblah: something;  }
}

И этот стиль будет применяться только в том случае, если ширина экрана меньше 480 пикселей. Это решение фактически не зависит от начальной загрузки, а от CSS3.

Кстати, если вы включили bootstrap.responsive.css(который также задан с помощью платформы bootstrap), ваш макет автоматически будет сделан одним макетом столбца, но, возможно, не в том порядке, в котором вы хотели.