it-swarm.com.ru

Bootstrap изменить порядок деления с помощью рычага вправо и рычага влево на 3 столбцах

Я работал над этим весь день, но не нашел решения. У меня есть 3 столбца в одном ряду в контейнере.

1: правый контент - правый

2: навигация - тянуть влево

3: основное содержание

Как это выглядит на больших экранах:

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

Как это должно выглядеть на маленьких экранах:

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

Как это выглядит сейчас:

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

Я думаю, что это просто плавающая проблема. Но я испробовал почти все возможности.

57
user2982964

Bootstrap 3

Использование системы координат Bootstrap 3:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-Push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

Рабочий пример: http://bootply.com/93614

Объяснение

Сначала мы устанавливаем два столбца, которые будут оставаться на месте независимо от разрешения экрана (col-xs-*).

Затем мы делим больший правый столбец на два столбца, которые будут сворачиваться друг на друге на устройствах размером с планшет и ниже (col-md-*).

Наконец, мы меняем порядок отображения, используя соответствующий класс (col-md-[Push|pull]-*). Вы толкаете первый столбец на величину второго, а второй - на величину первого.

98
Sean Ryan

Попробуй это...

<div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-Push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

Bootply

5
Zim