Как переместить div изнутри div на него прямо под маленькими экранами с помощью bootstrap4

Question

введите описание изображения здесь У меня есть div (div1), содержащий другой div (div2) Я хочу знать, как переместить div1 в div2 на маленьких экранах Я использую bootstrap4

Я пытался использовать классы строк и столбцов, но это не сработало

((div2)) <---- div2 внутри div1 я нуждаюсь: (Div1) (div2) друг на друга </p>

Edit:

<div id="div1" style="background:url("sdic/sdv.jpg") center no-repeat cover;">
 <div id="div2">
  Some content
 </div>
</div>

Я хочу, чтобы div2 перешел под div1, а div останется с фоновым изображением внутри

Answer 1

Вам нужно будет ввести еще один div внутри div1. На экранах размером более 425 пикселей он будет иметь нормальный порядок. Менее 425 пикселей, заказ перевернется.

edit: обновил ответ, чтобы он не нуждался в пользовательском CSS. Вы можете использовать bootstrap 4 d-flex и заказать классы для достижения того же результата. Это также будет использовать контрольные точки начальной загрузки.

(используйте предоставленный CSS, если без начальной загрузки)

.div1 { display: flex; flex-flow: column; }
.div3 { order: 1; }
.div2 { order: 0; }

@media (min-width: 425px) {
  .div3 { order: 0; }
  .div2 { order: 1; }
}

<div class="div1 d-flex">
  <div class="div3 order-2 order-sm-1"><h3>Div3</h3></div>
  <div class="div2 order-1 order-sm-2"><h2>Div2</h2></div>
</div>

.div1 { display: flex; }
.div2 { order: 2; }
.div3 { order: 1; }

Answer 2

Я попробовал это и случилось, чтобы работать

Css:

  /****HEADER START****/
  #header .header-background{
   background: url("../images/header.jpg");
   background-repeat:no-repeat;
   background-size: cover;
   background-position: center;
 }
 @media only screen and (max-width:1024px) {
  .header-background{
    background: none !important;
  }
 .header-img{
    display:block !important;

 }
  .form-container{
    display:none;
  }
  .form-container2{
    display: block !important;
  }
}
/****HEADER END****/

HTML:

   <div class="container-fluid header-background">
    <div class="row">
      <div>
        <img class="d-none img-fluid header-img" src="images/header.jpg"/>
         <div class="form-container">
          <img class="img-fluid"src="images/unkownbrand.png" />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, iure.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, eveniet?</p>
           <form>
           <input type="text" class="form-control" />
           <input type="text" class="form-control" />
           </form>
    </div>
  </div>
</div>
<div class="form-container2 d-none">
  <img class="img-fluid"src="images/unkownbrand.png" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, iure.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, eveniet?</p>
  <form>
  <input type="text" class="form-control" />
  <input type="text" class="form-control" />
  </form>
</div>

Answer 3

Лучший способ добиться этого - иметь родительский контейнер с двумя прямыми дочерними элементами, один элемент изображения с изображениями соответствующего размера, а другой элемент уровня блока (div подходит).

базовая разметка может выглядеть примерно так (измените размер браузера, чтобы увидеть эффект):

* {
  box-sizing: border-box;
  max-width: 100%;
}

.splash {
  height: 20em;
  position: relative;
}

.splash img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 40.1em) {
  .splash {
    height: 100vh;
    overflow: hidden;
  }
  
  .splash > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left; 0;
    width: 100%;
  }

  .splash > .modal {
    background-color: hsla(0,0%,0%,.2);
    height: 100vh;
    position: absolute;
    top: 0;
    left: 20%;
    width: 30%;
  }
}

<div class="splash">
  <picture>
    <img src="//unsplash.it/1600x900" />
  </picture>
  <div class="modal">
    <p>Form goes here/</p>
  </div>
</div>

Поначалу может быть немного сложно определить, учитывая простоту макета, но модал находится поверх элемента img в больших окнах просмотра, ноне на меньших.Вы хотели бы уточнить его и настроить размер в соответствии с вашими требованиями.

Вы хотели бы добавить больше источников изображения в элемент изображения, чтобы загрузить изображение, соответствующее экрану.Извините, я не могу дать больше подробностей, но мне нужно бежать на встречу, и это довольно простой подход, который не зависит от структуры.Я не думаю, что в Bootstrap есть встроенное решение для этого, так как это не очень распространенная функция, но я могу ошибаться.

Answer 4

Самый простой способ - добавить верхнее поле для дочернего элемента div в мобильном представлении

https://plnkr.co/edit/edrz9fQeRHqL1jPqV2Ri

<style>
.div1{
  border: 1px red solid;
  height: 100px;
  width: 100px;
}

.div2{
  border: 1px black solid;
  height: 50px;
  width: 50px;

}

@media only screen and (max-width: 400px) {
  .div2{
      margin-top: 100%;
  }
}
</style>
<div class="div1">
   <div class="div2">    
   </div>
</div>

Answer 5

Почему бы вам не попробовать использовать медиа-запрос для маленьких экранов, например

    @media (max-width: 801px) {

   div1 {position: relative;}
   div2 {position: absolute; top: -80px (adjust it as you want) };

}

Это должно работать.