Bootstrap: reorder 3 columns on small screens - html

Question

I'm having some problems when trying to reorder columns using bootstrap, HTML and CSS.
Currently, my layout is something like this:
B and C are contained inside a single column, while A has a column for itself. On desktop and tablets it's okay like that, but I need to reorder the content for small devices to get something like this:
My code is currently like this:
<div class="container">
<div class="row padding-m">
<div class="col-md-6">
<div class="card" style="padding: 0px 20px;">
BLOCK A
</div>
</div>
<div class="col-md-6">
<div class="card" style="border: none;">
BLOCK B
BLOCK C
</div>
</div>
</div>
</div>
So my problem is that, on one hand, I would need to split column 2 in two parts, and on the other, I would need B to move to the top of the column and C to move to the bottom. Is there any way of doing this?

Answer 1

Assuming "A" is taller as in your picture, just use pull-right on the other columns, and col-xs-12 to ensure full width on mobile...
Demo
<div class="row">
<div class="col-xs-12 col-md-6 pull-right">
<div>
B
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
A
</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>
C
</div>
</div>
</div>
Demo

Answer 2

With bootstrap 4 pull-right doesn't work anymore, and it also isn't compatible with flex.
Solution compatible with flex can be based on:
display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
order: -1 for reordering "B" element.
Complete code for pure HTML+CSS solution without any libraries:
* {
box-sizing: border-box;
}
.main-container {
display: flex;
}
.item {
width: 50%;
}
.photo-container {
background: #AAF;
display: flex;
align-items: center;
justify-content: space-around;
padding: 1rem;
}
.photo {
background: #55F;
width: 140px;
height: 220px;
border: solid 1px #33F;
}
.product-details h1 {
background: #FAA;
margin: 0;
padding: 1rem;
}
.product-description {
background: #FFA;
padding: 1rem;
}
#media (max-width: 600px) {
.main-container {
flex-direction: column;
}
.item {
width: 100%;
}
.product-details {
display: contents;
}
.product-details h1 {
order: -1;
}
}
<div class="main-container">
<div class="item photo-container">
<div class="photo"></div>
</div>
<div class="item product-details">
<h1>Product name</h1>
<div class="product-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
Solution based on bootstrap 4:
* {
box-sizing: border-box;
}
.photo-container {
background: #AAF;
display: flex;
align-items: center;
justify-content: space-around;
}
.photo {
background: #55F;
width: 140px;
height: 220px;
border: solid 1px #33F;
}
.product-details h1 {
background: #FAA;
}
.product-description {
background: #FFA;
}
#media (max-width: 576px) {
.product-details {
display: contents;
}
.product-details h1 {
order: -1;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row flex-column flex-sm-row">
<div class="col-12 col-sm-6 photo-container">
<div class="photo"></div>
</div>
<div class="col-12 col-sm-6 product-details">
<h1>Product name</h1>
<div class="product-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>