Зараз я читаю документацію на Twitter Bootstrap 3 і намагаюся стежити за порядком стовпців, як показано на цій сторінці, але потрапив у стіну. Я не розумію, чому такий код працює, ні як правильно вказати налаштування. Я хочу показати одну сітку, яка складається з довжини 5, а іншої довжини 5, і нарешті однієї довжини 2 сітки.

Тож моє щось таке:

[5] [5] [2]

І те, що я хочу досягти, це, коли його переглядають на робочому столі, відображається макет вище, але коли його переглядають на мобільному пристрої, я хочу спершу показати другий об'єкт довжиною 5, потім перший об'єкт довжиною 5 і нарешті об'єкт довжиною 2 , вертикально. Подобається це:

[5] (second)
[5] (first)
[2]  

Поки я намагався слідувати кроку, поясненому у вищевказаній документації, я отримав перший об'єкт довжиною 5 над другим, незважаючи на те, що на мобільних платформах, який, як я вже сказав, повинен відображати другий об'єкт довжиною 5 вгорі. Іншими словами, я отримав це:

[5] (first)
[5] (second)
[2] 

Тож як я можу правильно поставити другий поверх першого? Або оскільки я використовую об'єкт однакової довжини, чи може замовлення стовпців не працювати?

Ось мій код вашої інформації:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

Крім того, документація не уточнює, що pullабо pushозначає. То я щось пропускаю?

Дякую.

Ця відповідь складається з трьох частин, дивіться нижче для офіційного випуску (v3 та v4)

Я навіть не міг знайти класи col-lg-push-x або тягнути в початкових файлах для RC1, які я завантажив, тому перевірте ваш файл bootstrap.css. сподіваємось, це щось розберуть у RC2.

у будь-якому випадку, класи «push-*» та «pull» існували, і це буде відповідати вашим потребам. Ось демонстрація

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

РЕДАКТУВАТИ: Внизу є відповідь на офіційне звільнення v3.0

Також дивіться цю публікацію в блозі на цю тему

• col-vp-push-x= натисніть стовпчик праворуч на x кількість стовпців, починаючи з того місця, де стовпець зазвичай відображатиметься -> position: relative, на vp або більший порт перегляду.

• col-vp-pull-x= потягніть стовпчик ліворуч на x кількість стовпців, починаючи з того місця, де стовпець зазвичай відображатиметься -> position: relative, на vp або більший порт перегляду.

  vp = xs, sm, md або lg

  х = 1 через 12

Я думаю, що більшість людей заплутається в тому, що вам потрібно змінити порядок стовпців у вашій розмітці HTML (у прикладі нижче, B надходить до A) , і що це робить лише натискання або потягування на порти перегляду, які є більше або рівне тому, що було зазначено. тобто col-sm-push-5натискатиме лише 5 стовпців на smпортах перегляду або більше. Це відбувається тому, що Bootstrap - це "мобільний перший" фреймворк, тому ваш HTML повинен відображати мобільну версію вашого веб-сайту. Потім натискання та витягування здійснюються на великих екранах.

• (Робочий стіл) Більші порти огляду висуваються та витягуються.
• (Мобільний) Менші порти перегляду відображаються у звичайному порядку.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

View-port> = см

|A|B|C|

Перегляд-порт <sm

|B|
|A|
|C|

РЕДАКТУЙТЕ: НІЖЕ ВІДПОВІДЬ для v4.0

З v4 приходить flexbox та інші зміни в сітковій системі, і клавіші push \ pull були вилучені на користь використання замовлення флешбоксу.

• Використовуйте .order-*класи для керування візуальним порядком (де * = 1 до 12)
• Це також може бути специфічним для рівня сітки .order-md-*
• Також .order-first(-1) та .order-last(13) доступні

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Потягніть «тягне» діву вліво від браузера і натисніть «штовхає» діву вліво від браузера.

Подібно до:

Так, в основному, у макеті 3 стовпців будь-якої веб-сторінки "Головний корпус" відображається в "Центрі", а в перегляді "Мобільний" "Головний корпус" з'являється в "Вгорі" сторінки. В основному цього бажають всі, які мають 3 колонки.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Переглянути його можна тут: http://jsfiddle.net/DrGeneral/BxaNN/1/

Сподіваюся, це допомагає

Помилкове уявлення Поширене помилкове уявлення про впорядкування стовпців полягає в тому, що я (або міг би) робити натискання та перетягування на мобільних пристроях, а також вигляд робочого столу повинен відображатись у звичайному порядку розмітки. Це неправильно.

Reality Bootstrap - це перший мобільний фреймворк. Це означає, що порядок стовпців у вашій розмітці HTML повинен представляти порядок, у якому ви хочете, щоб вони відображалися на мобільних пристроях. Це означає, що натискання та перетягування здійснюється на великих видах робочого столу. не на перегляді мобільних пристроїв ..

Brandon Schmalz - Веб-розробник із повним стеком Перегляньте повний опис тут

Я просто відчував, що я додам свої $ 0,2 до цих 2 хороших відповідей. У мене був випадок, коли мені довелося переміщувати останню колонку аж до вершини в 3-колонковій ситуації.

[A] [B] [C]

до

[C]

[A]

[B]

Клас Boostrap .col-xx-push-Xне робить нічого іншого, але натискає на стовпчик праворуч, left: XX%; тому все, що вам потрібно зробити, щоб натиснути стовпець праворуч - це додати кількість псевдо стовпців, що йдуть ліворуч.

В цьому випадку:

• два стовпці ( col-md-5і col-md-3) йдуть ліворуч, кожен зі значенням того, що йде праворуч;

• one ( col-md-4) йде праворуч на суму перших двох, що йдуть вліво (5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Якщо вам потрібно впорядкувати дані в стовпці 1/2/4 залежно від розміру вікна перегляду, то натискання та перетягування може взагалі не бути можливим. Незалежно від того, як ви замовляєте ваші речі в першу чергу, один з розмірів може дати вам неправильне замовлення.

Рішенням у цьому випадку є використання вкладених рядків та знаків без будь-яких класів натискання та потягу.

Приклад

У XS ви хочете ...

A
B
C
D
E
F
G
H

У SM ви хочете ...

A   E
B   F
C   G
D   H

У MD і вище ви хочете ...

A   C   E   G
B   D   F   H

Рішення

Використовуйте вкладені дочірні елементи з двох стовпців у навколишньому батьківському елементі з двома стовпцями:

Ось робочий фрагмент:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Ще одна краса цього рішення полягає в тому, що елементи відображаються в коді в їх природному порядку (A, B, C, ... H) і не повинні переміщуватися, що добре для створення CMS.