如何讓一個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 

如何獲得左側的字形，並居中放置在標題文本塊的垂直中間？

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> 

Answer 2

你需要組中的每個圖標，文本和標題在一起，再加入一些類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>