在响应式设计中使 div 出现在容器外部

Question

我正在尝试让一些浮动元素出现在使用基于 Omega 的主题的 drupal 页面上的容器之外。我的页面当前结构如下：

<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
  <div class="container-12">
    <div class="pricing-main-background">
      <div class="grid-4 plan-box-orange">
      </div>
      <div class="grid-4 plan-box-green">
      </div>
      <div class="grid-4 plan-box-orange">   
      </div>
    <div class="pricing-subtext">
      some more text down here            
    </div>
  </div>
 </div>
</div>

这是我想要完成的草图（注意容器外面的小盒子）：

Visual Aid

任何人都可以帮助提供一种方法来完成这项工作（最好是在盒子堆叠（480px）时不需要乱七八糟的 CSS？

Answer 1

是这样的吗？

h2
{
    width:60%;
    border:1px solid black;
    border-bottom:0;
    margin:0 auto;
    text-align:center;
}
.grid-12
{
    width:60%;
    border:1px solid black;
    margin:0 auto;
    text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
    display:inline-block;
    width:30%;
    height:50px;
    margin-top:25px;
}
.grid-4:nth-of-type(1)
{
    position:absolute;
    left:-10%;
}
.grid-4:nth-of-type(3)
{
    position:absolute;
    right:-10%;
}

在响应式设计中使 div 出现在容器外部

Making a div appear outside of container in a responsive design

css

overflow

responsive-design