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

Question

I have a responsive web layout based on bootstrap. I have Glyphs, titles and text. These are my two layouts:
[1A] [1B] [1C]
[2A] [2B] [2C]
[3A] [3B] [3C]
This is the layout for small screens.
[1A] [2A]
[3A]
[1B] [2B]
[3B]
[1C] [2C]
[3C]
This code makes the first layout, but how do I achieve the second responsively?
EDIT:
I have this:
From this 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 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
How do I get the glyph on the left, and centered in the middle vertically of the title text block?

Answer 1

Just going off your diagram:
<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

You need group each icon, text and heading together, then add some classes for 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>