Настройка изменения divs на экране с 1200 пикселей (и выше) на мобильный

#css #twitter-bootstrap #bootstrap-4

Вопрос:

Я пытаюсь создать следующий макет (грубый чертеж, демонстрационная ссылка приведена ниже)

Для экрана 992, 1200 и выше

Для мобильных устройств я хочу, чтобы отображение менялось следующим образом

Я создал ссылку codeply, в которой есть элементы, работающие для размера экрана 992 и выше. Но я пытался получить мобильный вид, но не смог.

Нужно ли мне создавать разные css для разных размеров экрана? Возможно ли использовать только bootstrap без каких-либо дополнительных css?

Есть ли лучший подход, чем этот?

Спасибо за помощь!!

Ответ №1:

Итак, вот ваш код, применяющий order класс к контейнеру изображения.

Затем я также добавляю row класс к вашему классу, как показано ниже:

 <div class="row col-4 col-md-12 col-lg-12 d-flex justify-content-between mx-0" style="background: pink">
     <!--Apply new class as: order-3 order-sm-1 col-12, modify col-sm-12 for col-md-12 -->
     <div class="order-3 order-sm-1 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: red">

ДЕМОНСТРАЦИЯ:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row w-75 mx-auto">
        <div class="row col-4 col-md-12 col-lg-12 d-flex justify-content-between mx-0" style="background: pink">
            <div class="order-3 order-md-1 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: red">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>
            <div class="order-1 order-md-2 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: orange">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>
            <div class="order-4 order-md-3 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: green">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>
            <div class="order-2 order-md-4 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: silver">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>            
        </div>
        <div class="row offset-4 col-4 offset-md-0 col-md-12 col-lg-12 d-flex justify-content-between" style="background: yellow">
            <div class="order-2 order-md-1 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: blue">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>
            <div class="order-4 order-md-2 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: lime">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>
            <div class="order-1 order-md-3 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: lavender">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>
            <div class="order-3 order-md-4 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: gold">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is a icon
            </div>                
        </div>
    </div>
</div>

1. Макси, большое ТЕБЕ спасибо за это. Я читаю о порядке и понимаю его дальше. У меня есть еще один вопрос: что я могу сделать, чтобы убедиться, что в мобильном режиме текст состоит из одного предложения и не прерывается. Еще раз, большое вам спасибо.

2. Добро пожаловать. Я бы сделал ячейку больше, чем для мобильного устройства. Так как применяется заполнение, я бы просто добавил px-0 px-md-2 в контейнер изображения / текста, а затем поиграл с модулем font-size with em или rem , чтобы адаптировать его

Ответ №2:

Попробуйте это для адаптивной веб-страницы.

 .content {
  width: 100%;
  height: 200px;
  color: #fff;
  text-align: center;
  margin: 1.2rem auto;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-dark">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-danger">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-primary">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-warning">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-secondary">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-success">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-dark">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-danger">

      </div>
    </div>
  </div>
</div>