CSS - How to collapse floated right divs underneath on reduced screen width - html

Question

I currently have a widget looking how I want it to a large screen, but have problems when reducing it to something mobile friendly.
The widget has a title section which was two additional fields which need to be floated to right, and only take up as much width as there is text inside of them. I need the title-text on the left to take up the rest of the remaining space.
this is what it looks like
my HTML looks something like this:
<div class="widget">
<div class="section-title">
<div class="title-info">
<div class="info-2">Info 2</div>
<div class="info-1">Info 1</div>
</div>
<div class="title-text">Title</div>
</div>
</div>
CSS looks like this:
.section-title {
height: 100%;
font-size: 1.3em;
color: white;
}
.section-title .title-text {
background-color: #3261AD;
padding: 20px;
}
.section-title .title-info {
display: inline-block;
float: right;
}
.section-title .info-1{
background-color: #264D8C;
padding: 20px;
display: inline-block;
float: right;
}
.section-title .info-2{
background-color: #5BB75B;
padding: 20px;
display: inline-block;
float: right;
}
#media (max-width: 420px) {
.section-title .title-text {
/* ??? */
display: block;
width: 100%;
float: left;
}
.section-title .title-info {
/* ??? */
display: block;
width: 100%;
}
}
The problem occurs when I try to reduce the screen width. I'd like the title-info to collapse beneath the title-text, but can't switch the divs around because then the divs don't float to the right in the order that I want. Is there a way of it look like the image below without sacrificing how it looks on full width or creating a separate markup for mobile?
How I want it to look on mobile

Answer 1

https://jsfiddle.net/cpc4c3kt/
.section-title {
height: 100%;
font-size: 1.3em;
color: white;
}
.section-title .title-text {
background-color: #3261AD;
padding: 20px;
}
.section-title .title-info {
display: inline-block;
float: right;
}
.section-title .info-1 {
background-color: #264D8C;
padding: 20px;
display: inline-block;
float: right;
}
.section-title .info-2 {
background-color: #5BB75B;
padding: 20px;
display: inline-block;
float: right;
}
#media (max-width: 420px) {
.section-title .title-text {
/* ??? */
display: block;
width: 80%;
padding:20px 10%;
float: left;
transform: translateY(-100%);
}
.section-title .title-info {
/* ??? */
display: block;
width: 100%;
transform: translateY(100%);
}
.section-title .title-info>div {
display: inline-block;
float: right;
width: 40%;
padding: 5%;
}
}
<div class="widget">
<div class="section-title">
<div class="title-info">
<div class="info-2">Info 2</div>
<div class="info-1">Info 1</div>
</div>
<div class="title-text">Title</div>
</div>
</div>

Answer 2

Try using Flexbox Grid Layout. Flexbox Layout Module is inbuilt in CSS3 so you don't have to import any CSS. I find it easier to use in positioning complex element layouts.
.section-title {
display: inline-flex;
justify-content: flex-start;
flex-flow: row nowrap;
font-size: 1.3em;
color: white;
width: 100%;
}
.title-text {
flex-basis: 70%;
background: #3261AD;
order: 1;
padding: 20px;
}
.title-info {
flex-basis: 30%;
order: 2;
display: inline-flex;
flex-flow: row nowrap;
}
.info-1 {
background: #264D8C;
order: 1;
flex-basis: 50%;
padding: 20px;
}
.info-2 {
background: #5BB75B;
order: 2;
flex-basis: 50%;
padding: 20px;
}
#media all and (max-width: 420px) {
.section-title {
flex-wrap: wrap;
}
.title-info {
flex-wrap: nowrap;
flex-basis: 100%;
}
.title-text {
flex-basis: 100%;
}
.info-1 {
flex-basis: 50%;
}
.info-2 {
flex-basis: 50%;
}
}
<div class="widget">
<div class="section-title">
<div class="title-info">
<div class="info-2">Info 2</div>
<div class="info-1">Info 1</div>
</div>
<div class="title-text">Title</div>
</div>
</div>
https://jsfiddle.net/yz93799v/