如何跨越这些元素以便做出响应？

Question

我有这个网站：

http://avocat2.dac-proiect.ro/?page_id=25

此时我的物品按照他们的意愿居中。唯一的问题是它没有响应。

这是代码HTML：

 <div class="parentVerticalCenter">
    <div class="childVerticalCenter">


    <div class="row sss">

    <div class="col-sm-4 col-md-4 col-lg-12 col-lg-offset-0" style="font-size:17px;color:white;">

        <div class="container3">
               <div class="centered">[Contact_Form_Builder id="10"]</div>
        </div>

          </div>

        </div>

  </div>        
</div>

这是代码CSS：

   .container3 {
      background-color: green;
    }
    .centered {
      display: table;
      margin: 0 auto;
      background-color: red;
    }

     div[wdid="4"] {
    width: 40%;
    display: inline-block;
}

     div[wdid="22"] {
    width: 40%;
    display: inline-block;
    margin-left:-40px;
}


     div[wdid="2"] {
    width: 40%;
    display: inline-block;
}

     div[wdid="6"] {
    width: 40%;
    display: inline-block;
    margin-left:-40px;
}

如果删除此代码，我的元素会响应，但未正确对齐。

 .contactform10 .wdform_column
{
width:50% !important;
}

我尝试使用最小宽度和最大宽度但不起作用，所以在其他元素之上取一个

基本上，我的红色被分为两个相等的部分，每个部分的宽度为50％。

你能帮我解决这个问题吗？ 现在要显示的项目并且能够快速响应。

提前致谢！

Answer 1

使用带有引导程序的“推/拉”将帮助您在屏幕调整大小时以堆叠顺序重新定位元素...这可能就是您的意思吗？

全尺寸：
的 |项目1 |项目2 |

尺寸较小：
的 |第1项|
的 |项目2 |

Bootstrap在此讨论：http://getbootstrap.com/css/#grid-column-ordering

如果是这种情况，这个问题/答案也可以帮助您： Bootstrap 3: Push/pull columns only on smaller screen sizes

我使用基础（不是引导程序）并在该框架中执行此操作，您只需将其设置为与此伪代码类似：

<div id="item1" class="small-12-pull medium-12-pull large-6">lorem ipsum</div>
<div id="item2" class="small-12-push medium-12-push large-6">qwerty colec</div>