Обоснуйте блок контента начальной загрузки 4

Question

У меня есть этот код:

.banner {
  background: #f9f9f9;
  width: 300px;
  height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex justify-content-between">
            <div class="banner"></div>
            <div class="banner"></div>
            <div class="banner"></div>
        </div>
      </div>
</section>

Мне нужно на дисплее мобильного телефона и планшета: заблокируйте эти элементы banner с интервалом. Как я могу сделать это с помощью flex? Теперь я получаю элементы на линии.

Answer 1

Вы можете изменить направление на маленьком экране (https://getbootstrap.com/docs/4.2/utilities/flex/#direction)

.banner {
  background: red;
  border:1px solid;
  min-height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex  flex-column flex-sm-row justify-content-between">
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
        </div>
      </div>
</section>

Answer 2

На основании области просмотра вы можете использовать это d- * классы

Итак, это

<div class="d-flex justify-content-between">

будет

<div class="d-lg-flex justify-content-between">

Это сделает блок .banner (поведение по умолчанию для div) до большого окна просмотра