Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Bootstrap поменять блоки местами: Как в bootstrap 4 менять местами блоки при адаптации? — Хабр Q&A

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Bootstrap, перестановка двух элементов местами

Задавать вопрос

спросил

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

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

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

Итак, у меня есть два элемента div:

 

    
Один



<дел>
    
Два

Таким образом,

Два , конечно же, будут отображаться в правом столбце

Раньше, если я хотел, чтобы они менялись сторонами, я просто перемещал «Один» вправо, а «Два» — влево.

Но это больше не работает (я думаю, это связано с Flexbox?)… и я читал, что установка автоматических полей может использоваться вместо плавающих элементов.

Тем не менее, я попробовал следующее, и оба div остались такими, какие они есть:

 .one {
    поле слева: авто;
}
.два {
    поле справа: авто;
}

Есть ли обходной путь без изменения разметки?

  • html
  • css
  • twitter-bootstrap
  • flexbox
  • css-float

Я не знаю, есть ли родное решение для бутстрапа, но вы определенно можно использовать flex-direction: row-reverse; свойство для этого.

Взгляните на фрагмент ниже:

 .row-reverse {
  flex-направление: строка-реверс;
} 
 

<дел>
  <дел>
    
Один
<дел>

Два

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

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

спросил

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

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

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

К сожалению, на устройстве 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">
    
    
 

    Документ
    
    <стиль>
        .коробка {
            высота: 300 пикселей;
        }

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

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

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


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

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

Важно также включить Container и Row. https://getbootstrap.com/docs/4.0/layout/grid/

Исходный код выглядит так?

 <дел>
  <дел>
    <дел>
      1
    
    <дел>
      2
    
  
  <дел>
    <дел>
      3

Предполагая, что блок 2 имеет фиксированную высоту и всегда не больше той же высоты, что и блок 1, вы можете сделать следующее:

CSS: