How to responsively group rows, then columns in a bootstrap? - html

Question

I have a responsive web layout based on bootstrap. These are my two layouts:
[1A] [1B] [1C]
[2A] [2B] [2C]
[3A] [3B] [3C]
This is the layout for small screens.
[1A]
[1B]
[1C]
[2A] [3A]
[2B] [3B]
[2C] [3C]
For the small screen, I have a box around the horizontal groups ( 2A & 3A, 2B & 3B etc.). However, on large screens, I would like the items grouped vertically, so all the A's are in a box, all the B's are in a box etc. How do I do this, as the tags need to skip several sections as the HTML is written. Please see my code below. How would I do this?
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text 3</p>
</div>
</div>
</div>
</div>
</div>
EDIT
Using this code, I get the following result:
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:5px solid white; background:#3DBEAF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.Page2 > *:nth-child(-n+3){border-bottom:0; }
.Page2 > *:nth-last-child(-n+3){border-top:0;}
}
How do I make sure only the outside 4 corners are rounded? Also, any ideas why there is a line down the middle of the block?

Answer 1

Add a border around all of them and then target the first three/last three to customize the bottom/top border.
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:1px solid #999;}
.Page2 > *:nth-child(-n+3){border-bottom:0;}
.Page2 > *:nth-last-child(-n+3){border-top:0;}
}
updated code after comment
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:5px solid white;background:#3DBEAF;}
.Page2 > *:nth-child(-n+3){
border-bottom:0;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.Page2 > *:nth-last-child(-n+3){
border-top:0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
}
Updated demo
#media (min-width: 769px) {
/*use a value for your breakpoint*/
.Page2 > * {
border: 5px solid white;
background: #3DBEAF;
}
.Page2 > *:nth-child(-n+3) {
border-bottom: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.Page2 > *:nth-last-child(-n+3) {
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring">1A <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring">1B <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring">1C <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2A Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3A Text1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2B Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3B Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2C Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3C Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>