如何在Bootstrap 4.1中将图片定位在两个容器上方？

我正在做一个网页原型，需求是把一张透明PNG图片以不同旋转角度重复叠加在两个<section>区块的上方。我用Bootstrap 4.1搭建网站，整体布局采用container/row/col的结构，当前的基础代码结构如下：

<section class="one"> <!-- .container, .row, .col for content --> </section> 
<img src="flowers.png"> 
<section class="two"> <!-- .container, .row, .col for content --> </section>

目前我试过几个方案，但都存在问题：

• 用Tether JS库能实现效果，但这个库不够轻量，想找更简洁的实现方式；
• 尝试相对/绝对定位的方案，但因为网站要做自适应/响应式，这种定位方式无法适配不同屏幕尺寸；
• 试了左浮动的方式，结果会打乱下方内容的布局，导致文本移位。

附上我的原型效果图，方便大家理解需求：

想请教各位，还有哪些可行的轻量解决方案能满足我的需求？

内容的提问来源于stack exchange，提问作者bafromca