Responsive design (breakpoints) - Put everything in one column - html

Question

I divided a page into two columns. When I reduce the screen, is there any way to put everything in just one column?
At this moment, when I reduce the screen, the width of the cards decreases (as shown in the image). Is there a way to put all the cards in just one column (on mobile) in order to keep the width at 100%?
Is there a way to put everything in just one column and with a margin top between the elements?
Thanks.
Stackblitz - DEMO
Code
<div style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden;">
<div style="width: 100%; height: 85%">
<div class="modal-body row" style="overflow: auto; margin-top: 135px; height: 100%;">
<div class="col-md-6">
<div style="height: 700px;">
<div class="container">
</div>
<div class="row">
<div class="Upcard">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row" style="height: 100%;">
<div class="col-6">
<div class="card cardBig" style="margin-left: 16px; margin-right: 16px; line-height: 1;">
<div class="card-header header">
<h1> It </h1>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-6">
<div class="card" style="margin-left: 8px; margin-right: 16px; line-height: 1;">
<div class="card-header header">
<h1> data </h1>
</div>
<div class="card-body">
</div>
</div>
<div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> T </h1>
</div>
<div class="card-body" style="overflow-y: auto; overflow-x: hidden;">
</div>
</div>
<div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> Att </h1>
</div>
<div class="card-body att" style="overflow-x: hidden; overflow-y: auto;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Please try this snippet.
.card {
width: 100%;
height: 50%;
margin-bottom: 16px;
background: red 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
opacity: 1;
border: none;
}
.cardBig {
height: calc(100% - 16px);
}
.card-small {
height: 23%;
}
/* ---------------------------UPLOAD----------------------------------- */
.container {
width: 100%;
height: 100%;
padding: 2rem;
text-align: center;
border: dashed 4px blue;
position: relative;
margin: 0 auto;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden;">
<div style="width: 100%; height: 85%">
<div class="modal-body row" style="overflow: auto; margin-top: 135px; height: 100%;">
<div class="col-md-6 col-sm-12">
<div style="height: 700px;">
<div class="container">
</div>
<div class="row">
<div class="Upcard">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row" style="height: 100%;">
<div class="col-md-6 col-sm-12">
<div class="card cardBig">
<div class="card-header header">
<h1> It </h1>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-header header">
<h1> data </h1>
</div>
<div class="card-body">
</div>
</div>
<div class="card card-small">
<div class="card-header header">
<h1> T </h1>
</div>
<div class="card-body" style="overflow-y: auto; overflow-x: hidden;">
</div>
</div>
<div class="card card-small">
<div class="card-header header">
<h1> Att </h1>
</div>
<div class="card-body att" style="overflow-x: hidden; overflow-y: auto;">
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
<p>asdasdasdasdasdasdasdas</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>