Convert Horizontal Data List to Vertical- Media Queries, CSS - html

Question

Please help to convert the below markup to be responsive across various screens using media queries, also please feel free to update the styles for the mark up where ever required:
Outstanding concerns with the below code are:
Code is not responsive
Styles break specially with in the date and time section of the
markup. Specifically, these css classes break across the screen
.downtime-styles & .date-container & .date-range & .date-month &
.date-time & .date-day classes specified below in the CSS
.downtime-styles{
text-align: center;
padding-bottom: 30px;
color: #007599;
font-family: Univers LT W01_55 Roman1475956,Arial,serif;
}
.date-container {
display: inline-block;
text-align: center;
color: #007599;
font-family: Univers LT W01_55 Roman1475956,Arial,serif;
}
.date-range {
height: 100%;
display: flex;
padding-left: 15px;
-webkit-box-pack: center;
justify-content: left;
-webkit-box-align: center;
align-items: center;
}
.date-month {
width: 100%;
font-size: 14px;
text-transform: uppercase;
padding-top: 30px;
margin: 0;
}
.date-time {
width: 100%;
font-size: 14px;
text-transform: uppercase;
padding-top: 0px;
margin: 0;
}
.date-day {
font-size: 24px;
padding-bottom: 0px;
margin-bottom: 0;
}
.div-div {
padding-top: 20px;
padding-left: 40px;
font-size: 100%;
font: inherit;
}
.main-div{
position: relative;
margin-top: 10px;
display: flex;
margin-right: 0px;
margin-left: 0px;
height: 125px;
border: 1px solid #A9A9A9;
border-radius: 12px;
overflow: hidden;
background-color: #f8f8f8;
}
.main-div-summary{
position: relative;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
height: 125px;
border: 1px solid #A9A9A9;
border-radius: 12px;
background-color: #f8f8f8;
}
.main-box{
background-color: #2cbc85;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 30px;
}
.p-box{
transform-origin: 0 50%;
position: absolute;
font-weight: bold;
top: 0;
bottom: 0;
height: 30px;
line-height: 30px;
margin: auto;
transform: rotate(-90deg) translate(-50%,50%);
color: black;
text-transform: uppercase;
font-size: 16px;
font-family: Univers LT W01_65 Bold1475968,Arial,serif;
}
.title-class{
font-size: 20px;
}
.pipeline-item-section{
height: 100%;
padding-top: 15px;
padding-left: 70px;
padding-bottom: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #000f2b;
font-family: Univers LT W01_45 Light1475944,Arial,serif;
}
.light-font{
font-weight: normal;
margin: 0px;
font-weight: 100;
font-family: Arial;
}
<div class="row main-div">`enter code here`
<div class="main-box">
<p class="p-box"><span>COMPLETE</span></p>
</div>
<div class="col-xs-3 text-right pipeline-item-section">
<p class="title-class"><span>TITLE OF EVENT</span></p>
</div>
<div class="col-xs-3 pipeline-item-section">
<p class="title-class"><a class="hyperlink-
text">XYZLMNOP</a></p>
<div>
<p class="light-font"><span>Name: </span>ABC</p>
<p class="light-font"><span>Type: </span>XYZ</p>
</div>
</div>
<div class="col-xs-3 pipeline-item-section">
<p class="title-class">Users Notified: <a
class="hyperlink-text">4</a></p>
<div>
<p class="light-font"><span>Impacted Count: </span>
<span>3</span></p>
<p class="light-font"><span>Impacted List: </span>
<span>1</span></p>
</div>
</div>
<div class="col-xs-3 date-range">
<div class="div-div">
<div class="date-container">
<p class="date-month">JUNE</p>
<p class="date-day">2</p>
<p class="date-time">10 AM</p>
</div>
<i class="fa fa-long-arrow-right"></i>
<div class="date-container">
<p class="date-month">JUNE</p>
<p class="date-day">3</p>
<p class="date-time">12 PM</p>
</div>
<div class="downtime-styles"><span>Downtime:
</span>2 hours</div>
</div>
<div class="button-styles btn-group flex-btn-group-
container">
<button type="submit" replaceUrl="true">
<span class="fa fa-remove"></span>
</button>
<button type="submit" replaceUrl="true">
<span class="fa fa-pencil"></span>
</button>
</div>
</div>
</div>