Html 如何使一个div漂浮在另一个div上，如下图所示

我一直在努力取得任何成功来实现这样的目标

这是使用桌面

这是一个移动视图

怎么做这个？如果有可能使用推特引导，我会觉得很棒

---

提前干杯和感谢=D

您可以在此代码上开发；

2.
1.
身体{
左边距：0px；
左侧填充：0px；
}
.gn{
宽度：800px；
高度：280px；
背景色：rgb（34,34,34）；
文本对齐：-webkit中心；
填充：40px；
}
.在{
背景色：#F7979；
宽度：800px；
高度：300px；
}
.tx{
字体大小：172px；
颜色：#fff；
文本对齐：右对齐；
右侧填充：120px；
}
@介质（最大宽度：700px）{
.gn{
填充：0px；
宽度：400px；
}
.tx{
右边填充：60px；
} 
.在{
宽度：400px；
}
}

请添加相关代码和您尝试过的任何代码。显示：block；是你的朋友对不起，伙计们。。。。在我发了这条信息后，我因为紧急情况离开了家，几分钟前才回来。。。。但是现在，答案已经完成了。。。。感谢并对此表示歉意=\perfect solution！！非常感谢=D

<div class="gn">
  <div class="tx">
    2
  </div>
  <div class="in">
    <div class="tx">
      1
    </div>
 </div>
</div>

<style>
body {
  margin-left: 0px;
  padding-left: 0px;
}

.gn {
  width: 800px;
  height: 280px;
  background-color: rgb(34,34,34);
  text-align: -webkit-center;
  padding: 40px;
}

.in {
  background-color: #f79779;
  width: 800px;
  height: 300px;
}

.tx {
  font-size: 172px;
  color: #fff;
  text-align: right;
  padding-right:120px;
}

@media (max-width:700px){
  .gn {
    padding:0px;
    width:400px;
  }
  .tx {
    padding-right:60px;
   } 
  .in {
    width:400px;
  }
}
</style>