编辑：

Question

我有一个基于bootstrap的响应式Web布局。我有标志符号，标题和文字。这是我的两个布局：

[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

如何获取左侧的字形，并在标题文本块的垂直中间居中？

Answer 1

您需要将每个图标，文本和标题组合在一起，然后为col-xs-*添加一些类：

http://codepen.io/anon/pen/RreRrN

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="col-xs-3 col-sm-12">
        <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn"/></div>
      </div>
      <div class="col-xs-9 col-sm-12">
        <h2>Title 1</h2>
        <p>Text 1</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="col-xs-3 col-sm-12">
        <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok"/></div>
      </div>
      <div class="col-xs-9 col-sm-12">
        <h2>Title 2</h2>
        <p>Text 2</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="col-xs-3 col-sm-12">
        <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone"/></div>
      </div>
      <div class="col-xs-9 col-sm-12">
        <h2>Title 3</h2>
        <p>Text 3</p>
      </div>
    </div>
  </div>
  </div>

Answer 2

离开你的图表：

<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>

如何使div跨越两行（仅限移动布局）？

编辑：

2 个答案: