Div блоки друг под другом в мобильной версии

Question

Есть 3 блока разных размеров подряд.Как я могу сделать их отзывчивыми, потому что в мобильной версии они накладываются друг на друга.

.watch {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 224px;
    height: 69px;
    cursor: pointer;
    background-color: #918A83;
    opacity: 0.85;
}

.watch-elements {
    margin: 20px 20px;
}

.watch p {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}

.mouse {
    position: absolute;
    bottom: 0;
    border: 1px solid #DAD3CC;
    width: 577px;
    height: 69px;
    cursor: pointer;
    background-color: #fff;
}

.mouse-elements {
    text-align: center;
    margin-top: 10px;
}

.mouse p {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
}

.chat-bot {
    position: absolute;
    bottom: 20px;
    background-color: #09A753;
    border-radius: 100px;
    right: 100px;
    width: 227px;
    height: 39px;
    cursor: pointer;
}

.chat-bot img {
    margin-top: -20px;
    margin-left: -15px;
}

.chat-bot p {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: -15px;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}


@media all and (max-width: 1024px) {
    .watch img {
        position: absolute;
        float: left;
        left: 0;
    }
    .watch p {
        margin-left: 20px;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="container mt-5">
      <h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
    </div>
  </div>

  <div class="d-flex justify-content-left">
    <div class="watch">
      <div class="watch-elements">
        <img src="assets/img/icons/icon2.svg">
        <p>Watch Presenation</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center">
    <div class="mouse">
      <div class="mouse-elements">
        <img src="assets/img/icons/Icon1.svg"><br>
        <p>Scroll Down</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-right">
    <div class="chat-bot">
      <img src="assets/img/06w.png">
      <p>Hi, can I help you?</p>
      <img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
    </div>
  </div>
</div>

Теперь они располагаются в ряд, как на изображении

В мобильной версии левый блок исчезает иЯ не вижу его, также наложение второго и третьего блоков друг на друга.

Answer 1

position:absolute и связанные свойства не подходят для этой функции.Вы можете использовать CSS flexbox layout

Для получения дополнительной информации используйте эту ссылку: Полное руководство по Flexbox

Я объясняю простое использование flexbox layout на следующем примере:

#wrapper{display:flex;flex-wrap:wrap;justify-content:space-between}

/*just for styles*/
#wrapper div{background-color:#f5f5f5;text-align:center;padding:2px 5px;margin:2px}
#e3{width:200px}

<div id="wrapper">
  <div id="e1">element 1</div>
  <div id="e2">element 2</div>
  <div id="e3">element 3</div>
  <div id="e4">element 4</div>
</div>

Также с помощью гибкого макета вы можете манипулировать местами элементов в зависимости от размера области просмотра с помощью свойства order.

Answer 2

Я поместил все элементы в div с class footer.и использовал bootstrap flex css свойства, чтобы выровнять его.Надеюсь, это поможет вам.спасибо

.watch {
    width: 224px;
    height: 69px;
    cursor: pointer;
    background-color: #918A83;
    opacity: 0.85;
}

.watch-elements {
    margin: 20px 20px;
}

.watch p {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}

.mouse {
    border: 1px solid #DAD3CC;
    width: 577px;
    height: 69px;
    cursor: pointer;
    background-color: #fff;
}

.mouse-elements {
    text-align: center;
    margin-top: 10px;
}

.mouse p {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
}

.chat-bot {
    background-color: #09A753;
    border-radius: 100px;
    right: 100px;
    width: 227px;
    height: 39px;
    cursor: pointer;
}

.chat-bot img {
    margin-top: -20px;
    margin-left: -15px;
}

.chat-bot p {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: -15px;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}


@media all and (max-width: 1024px) {
    .watch img {
        position: absolute;
        float: left;
        left: 0;
    }
    .watch p {
        margin-left: 20px;
    }
}

.footer {
    position: absolute;
    bottom: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="container mt-5">
      <h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
    </div>
  </div>
<div class="d-flex footer justify-content-sm-center align-content-between flex-sm-wrap flex-lg-nowrap">
  <div class="d-flex justify-content-left">
    <div class="watch">
      <div class="watch-elements">
        <img src="assets/img/icons/icon2.svg">
        <p>Watch Presenation</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center">
    <div class="mouse">
      <div class="mouse-elements">
        <img src="assets/img/icons/Icon1.svg"><br>
        <p>Scroll Down</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-right align-items-center">
    <div class="chat-bot">
      <img src="assets/img/06w.png">
      <p>Hi, can I help you?</p>
      <img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
    </div>
  </div>
</div>
</div>

Answer 3

вы можете попробовать заменить существующие div на следующие

<div class="d-flex justify-content-left col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-center col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-right col-lg-3 col-md-6 col-xs-12">

Answer 4

Для мобильных устройств, пожалуйста, попробуйте положение: относительное, а не положение: абсолютное.Не забудьте настроить другие значения CSS в соответствии с вашими требованиями.Надеюсь, что это решит ваши проблемы

@media all and (max-width: 767px) {
.watch, .mouse, .chat-bot{
position:relative;
right:auto;
left:auto;
top:auto;
bottom:auto;
margin:5px 0
}
}