To be able to accomplish that without using script, all the items (h2,p,p,ul) needs to see each other, which technically mean they need to be siblings.
And then, for wider screens where they sit side-by-side, they need to be reordered, where the h2 comes first (order: 0) and so on.
I used one media query, but you might want to add more, to match more of Boostrap’s break points.
To add i.e. an outer border, you need to use a combination of border-top/border-left/border-right/border-bottom on the elements, which also need to be altered with the query’s, to cover both horizontally and vertically stacked items.
@media (min-width: 768px) {
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.content > * {
flex-basis: calc(50% - 30px);
}
.content h2 { /* 1st row */
order: 0;
}
.content p { /* 2nd row */
order: 1;
}
.content p + p { /* 3rd row */
order: 2;
flex-basis: calc(100% - 30px); /* as only 1 `p` in markup, it need 100% width,
or add an extra empty in the markup */
}
.content ul { /* 4th row */
order: 3;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="light-grey-section ruler">
<div class="container">
<div class="row">
<div class="light-section col-xs-12">
<div class="content">
<h2>Lorem ipsum Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
<p>
Lorem ipsum dolor
</p>
<ul class="check">
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</p>
<ul class="check">
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
</div>
</div>
</div>
</div>
</div>Updated, based on a comment at a duplicate question
If one have many items, one can group them, i.e. 4 per group, to make the CSS much smaller.
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.container .row {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.container .row>* {
flex-basis: calc(100% - 30px);
min-width: 0;
}
.container .row>div {
border: 2px solid gray;
}
.container .row>div:nth-child(8n+1),
.container .row>div:nth-child(8n+2),
.container .row>div:nth-child(8n+3),
.container .row>div:nth-child(8n+4) {
background: lightgray;
}
.container .row>div:nth-child(4n+1) {
border-width: 2px 2px 0 2px;
margin-top: 10px;
}
.container .row>div:nth-child(4n+2) {
border-width: 0 2px;
}
.container .row>div:nth-child(4n+2)+div {
border-width: 0 2px;
}
.container .row>div:nth-child(4n+4) {
border-width: 0 2px 2px 2px;
}
@media (min-width: 600px) {
.container .row>* {
flex-basis: calc(50% - 30px);
}
.container .row>div:nth-child(4n+1) {
order: 0;
}
.container .row>div:nth-child(4n+2) {
order: 1;
}
.container .row>div:nth-child(4n+2)+div {
order: 2;
}
.container .row>div:nth-child(4n+4) {
order: 3;
}
.container .row>div:nth-child(4n+9) {
order: 4;
}
.container .row>div:nth-child(4n+10) {
order: 5;
}
.container .row>div:nth-child(4n+10)+div {
order: 6;
}
.container .row>div:nth-child(4n+12) {
order: 7;
}
}<div class="container">
<div class="row">
<div><h2>Title 1</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 2</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 3 is a bit longer to make it wrap</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 4</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2 is a bit longer to force it to wrap</p></div>
<div><button>Button</button></div>
</div>
<div class="row">
<div><h2>Title 5</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 6</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 7 is a bit longer to make it wrap</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 8</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2 is a bit longer to force it to wrap</p></div>
<div><button>Button</button></div>
</div>
</div>