Переупорядочивание divs с помощью Twitter Bootstrap?

Я работаю с Twitter Bootstrap v3 и хочу быстро изменять порядок элементов, используя и offsetting.

Вот как я хотел бы использовать свои элементы. На отметках -xs или -sm, при этом содержащее div сложенное 4 в строку:

В точке -md или -lg точки останова с содержащим div, уложенным в 2 строки:

Это текущий код - я знаю, как устанавливать классы в содержащем div, но не на A, B и C:

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

Я не могу понять, как получить A, B и C в правильном порядке с помощью Bootstrap 3 порядок столбцов и offsetting. Действительно ли это возможно?

Это до тех пор, пока я не использовал JSFiddle: http://jsfiddle.net/3vYgR/

Ответ 1

Я думаю, вы хотите посмотреть классы push и pull...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

Демо: http://bootply.com/77853

Ответ 2

Любая причина не использовать более традиционные методы для этого, т.е. плавающий B слева, а остальные элементы - вправо?

Как если бы вы добавили это в текущий CSS в свой jsfiddle:

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

См. http://jsfiddle.net/E6BFk/

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

Ответ 3

Я попробовал push/pull, как показано в ответе Skelly, но C заканчивается в новой строке после применения высоты: http://www.bootply.com/Q3djHYawgb#

Если B можно показать сначала, когда показано небольшим размером, я думаю, что имеет смысл создать строку внутри столбца правой стороны, чтобы содержать A и C:

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

См. http://jsfiddle.net/hoodoo99/L2BE9/

Ответ 4

Ответ, предоставленный @skelly, является отличной отправной точкой, но вызывает некоторые проблемы вертикального выравнивания. Представьте A - высокий div, затем C выровнен по вертикали ниже A.:

[A] [B]
[ ]
    [C]

Кроме того, если вы хотите сделать этот шаг дальше, вам также может потребоваться использовать блоки clearfix. Например:

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

Без clearfix md или lg может закончиться следующим образом:

[A] [B]
    [C] [D]

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

С clearfix md или lg будет:

[A] [B]
    [C]
    [D]

Пример скрипта: http://jsfiddle.net/L5174o8d/