html - 如何使一个 div 跨越两行(仅在移动布局上)？

Question

我有一个基于 bootstrap 的响应式网页布局。我有字形、标题和文本。这是我的两个布局:

[1A] [1B] [1C]

[2A] [2B] [2C]

[3A] [3B] [3C]

这是小屏幕的布局。

[1A] [2A]
[3A]

[1B] [2B]
[3B]

[1C] [2C]
[3C]

这段代码实现了第一个布局，但我如何响应式地实现第二个布局？

编辑:

我有这个:

从这段代码:CSS:

.green-box {
    background: #3DBEAF;
    border: 5px solid #e7e7e7;
    border-radius: 20px;
    margin-top: 10%;
    margin-bottom: 10%;
    padding-top: 10px;
    padding-bottom: 15px;
    margin-left: 2.77778%
}
@media (max-width: 769px) {
.mob-hide{
    display: none;  
}
.green-box{
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

}

HTML:

<div class="container text-center">
    <div class="col-xs-12 col-sm-3 green-box eqheight1">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered" /></div>
      <div class="col-xs-9 col-sm-12">
        <h3>Revolutionary</h3>
      </div>
      <div class="col-xs-9 col-sm-12">
        <p class>Knowing when to change a gas bottle isn't always easy so many people buy a back-up or risk running out unexpectedly is a real pain - it might leave you cold or with hungry in-laws, either way it will spoil your day. Meet Gas-Sense!</p>
      </div>
    </div>
    <div class="col-sm-1 margin mob-hide"></div>
<!-- Other two boxes -->
</div

如何让字形位于标题文本 block 的左侧并垂直居中？

Answer 1

只是离开你的图表:

<div class="container">
    <div class="col-sm-12 col-md-4">
        <div class="col-sm-3 col-md-12">The X icon in the diagram</div>
        <div class="col-sm-9 col-md-12">
            The article text
        </div>
    </div>
</div>