html - How to make a div span two rows (only on mobile layout)? -

i have responsive web layout based on bootstrap. have glyphs, titles , text. these 2 layouts:

[1a]          [1b]        [1c]

[2a]          [2b]        [2c]

[3a]          [3b]        [3c]

this layout small screens.

[1a] [2a]
       [3a]

[1b] [2b]
       [3b]

[1c] [2c]
       [3c]

this code makes first layout, how achieve second responsively?

edit:

i have this:

from code: 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 change gas bottle isn't easy many people buy back-up or risk running out unexpectedly real pain - might leave cold or hungry in-laws, either way spoil day. meet gas-sense!</p>       </div>     </div>     <div class="col-sm-1 margin mob-hide"></div> <!-- other 2 boxes --> </div 

how glyph on left, , centered in middle vertically of title text block?

just going off diagram:

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