html — Как изменить порядок колонок в bootstrap?

Вот есть структура:

<container>
  <div>
    <div>1</div>
    <div>2</div>
  </div>
</container>

При сужении экрана первая колонка остаётся на верху а вторая съезжает в низ. Как сделать чтобы второй блок был на верху а первый в низу при сужении?

  • html
  • css
  • bootstrap

2

  1. Поменяйте блоки в верстке местами — чтобы сначала шел блок 2, потом 1.
  2. Для sm-экранов — примените классы как в примере ниже
  3. Для md и lg-экранов — классы можете не указывать. т.к. расположение блоков у вас на них такое же, как на sm.

Получится так:

<container>
  <div>
    <div>2</div>
    <div>1</div>
  </div>
</container>

Порядок вывода двух блоков можно менять для разных разрешений.

В данном коде при изменении размера до «телефонного», первым будет отображен 2-й блок:

<container>
    <div>
        <divcol-sm-6 order-sm-last order-first>2</div>
    </div>
</container>

Выше описанные методы, либо устаревшие либо не работают. Для Bootstrap 4.4.1 можно сделать так, проверено:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <container>
        <div>
            <div
                ><h4>MENU</h4></div>
            <div 
                ><h3>CONTENT</h3></div>
        </div>
    </container>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — bootstrap — смена позиционирования блока

С использованием bootsrtap создано два блока:

<div>
  <divcol-lg-6 col-xs-12>
    <p>Тут второй текст</p>
  </div>
</div>

Как сделать так, чтобы при экране xs, второй блок становился выше первого?

  • css
  • bootstrap

В 4ом бутстрапе для определения порядка элементов есть класс . order-*:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div>
  <div>
    <div>
      <p>Первый блок</p>
    </div>
    <div>
      <p>Второй блок, при экране xs, становится выше первого</p>
    </div>
  </div>
</div>

Выше вам дали правильный ответ, только

<div>
<div>
  <div>
    <p>Первый блок на XS</p>
  </div>
  <div>
    <p>Второй блок на XS</p>
  </div>
</div>

Здесь нужно начинать думать с XS, то есть первый будет первым на XS а на остальных размерах регулировать с помощью push/pull

5 

[class*=col-] {
  border: 1px solid #ccc;
  background: #f7f7f7;
}
<link href="https://maxcdn. bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <div>
    <p>Тут второй текст</p>
  </div>
  <div>
    <p>Тут какой-то текст</p>
  </div>
</div>

Подробней на сайте.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div>
  <div>
    <div>
      <p>Тут второй текст</p>
    </div>
    <div>
      <p>Тут какой-то текст</p>
    </div>
  </div>
</div>

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как я могу изменить порядок столбцов Bootstrap?

спросил

4 года 5 месяцев назад

Изменено 4 года, 5 месяцев назад

Просмотрено 357 раз

Вот как блоки расположены на рабочем столе в классе строк, который хорошо выглядит на рабочем столе.

К сожалению, на устройстве xs это выглядит не так, как нам нужно. Мне нужен этот заказ, когда он отображается на очень маленьком устройстве:

 1
3
2

Решение, которое не работает: я не могу поместить блок 3 в блок 1, так как мне нужна полная ширина блока 3 на рабочем столе (100% ширины экрана, а не 100% блока 1).

Любые идеи, как изменить порядок 2-го и 3-го блоков с помощью чистого css на xs-устройствах, чтобы он был как

 1
3
2

, а не

 1
2
3

как сейчас?

Спасибо.

  • HTML
  • css
  • twitter-bootstrap-3

2

Любые идеи, как изменить порядок 2-го и 3-го блоков с помощью чистого CSS на xs-девайсах так же как

Попробуйте это:

 


<голова>
    <мета-кодировка="UTF-8">
    
 
 0">
    
    Документ
    
    <стиль>
        .коробка {
            высота: 300 пикселей;
        }

        .box-1 {
            цвет фона: оранжевый
        }

        .box-2 {
            цвет фона: синий;
        }

        .box-3 {
            цвет фона: зеленый;
        }
    
 



<тело>
    <дел>
<дел>