如何在保留响应式设计的同时，超越容器？

Question

我想建立这个页面，但我有一个问题，那就是我不知道如何在保留响应式布局的同时，强制将图片从bootstrap容器中取出来，有什么办法可以让我不需要为每个单一设备进行大量的绝对定位？

网页屏幕设计

IPads和小屏幕设计

Answer 1

这里有一个两栏式的响应式设计，大致模仿你的布局。

它使用Bootstrap的列排序功能，在较小的屏幕上交换文本和图像块的顺序。

div {
  outline: 1px solid red;
}

.img-absolute {
  position: absolute;
  top: 80px;
  right: 80px;
}

.div-black {
  position: absolute;
  top: 40px;
  right: 40px;
  background-color: black;
  width: 280px;
  height: 280px;
}

@media (max-width: 990px) {
  .img-absolute {
    right: 380px;
  }
  .div-black {
    right: 340px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div clas="container">
  <div class="row">
    <div class="col-lg-6 order-1 order-lg-2">
      <h4>Lorem Ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim. Duis ut diam quam nulla porttitor massa id neque aliquam. Non pulvinar neque laoreet suspendisse interdum consectetur. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Urna duis convallis convallis tellus id interdum velit laoreet id. Lacus vel facilisis volutpat est velit egestas. Eros donec ac odio tempor. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Morbi tempus iaculis urna id volutpat lacus laoreet. Ultricies mi eget mauris pharetra et ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Mi quis hendrerit dolor magna eget est lorem. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Neque aliquam vestibulum morbi blandit cursus risus at.</p>
    </div>
    <div class="col-lg-6 col order-2 order-lg-1">
      <div class="div-black"></div>
      <img class="img-absolute"
           src="https://i.picsum.photos/id/402/600/300.jpg" />
    </div>
  </div>
</div>