How to make proper form of media queries? - html

Question

I am trying to make my website look adaptive for both smartphones and desktops. There're Chart and Info blocks. I want them to be positioned across the width on desktops and laptops, and one above the other on the mobiles. But Chart goes into first block at the small mobile width. What can I do here?
.
It already looks nice and good at desktops.
#media only screen and (min-width: 320px) and (max-width: 1281px) {
/* ??? */
}
<div class="justify-content-flex-start" style="margin-top: 10px; padding-left: 0%; padding-right: 1%;margin-left:15%; min-width: 320px; max-width: 1281px;">
<div class="row" style="margin-top: 10px; padding-left: 1%; padding-right: 1%;">
</div>
</div> <!-- First block -->
<div class="container" style="width: 360px; margin-top: 10px; padding-left: 1%; padding-right: 1%; padding-bottom: 10%; margin-right: 25%">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="./src/js/graph.js"></script>
<div id="FlexCGraph justify-content: center" ><iframe class="chartjs-hidden-iframe" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;" src=></iframe>
<canvas id="global-speed-chart" style="display: block; height: 250px; width: 100%; padding-right: 1%; margin-right: -8%; margin-top: -78%; padding-bottom: 5%; padding-top: 1%;"></canvas>
</div>
</div>
<!-- Chart -->
#media (min-width: 1920px) {
.dashboard {
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
align-items:center;
align-content: center;
justify-content: flex-end;
}
}
#media only screen and (min-device-width: 360px) {
.dashboard__desc {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding-top: 10px;
align-content: center;
align-items: center;
justify-content: flex-start;
}
}
#media only screen and (min-device-width: 360px){
.crypto-card{
width: 360px;
height: 215px;
background: white;
right: 40px;
padding: 10px;
margin: 10px;
border: 0.1px solid rgb(220, 220, 220);
max-width: 360px;
align-content: center;
align-items: center;
justify-content: center;
}
}
#media only screen and (min-device-width: 360px){
.row{
align-content: center;
align-items: center;
justify-content: center;
}
}
#media only screen and (min-device-width: 360px){
.crypto-card .body{
width: 100%;
padding: 20px;
margin: 2px;
font-size: -0.4rem;
font-family: 'Myriad Pro', sans-serif;
position: relative;
top: 5px;
align-content: center;
align-items: center;
justify-content: center;
}
}
#FlexCGraph
{
align-content: center;
align-items: center;
justify-content: flex-end;
position: absolute;
padding: 10px 10px 10px 10px;
margin: auto;
width: 360px;
height: 215px;
max-width: 360px;
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-align-self: auto;
align-self: auto;
background-color: transparent;
border: 0.1px solid rgb(220, 220, 220);
box-sizing: border-box;
flex: 0 0 50%;
}
#wb_FlexCGraph
{
align-content: center;
align-items: center;
justify-content: flex-end;
padding-left: 10%;
visibility: visible;
display: block;
-webkit-flex-grow: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-align-self: auto;
align-self: auto;
}
}