media queries, how to change <div> position without changing HTML - css

Question

Media queries question: how to change div position without changing HTML, only with CSS.
I want the contact form with all the inputs and button <div class="contact__form"> which is on the right, to be above the map, when in mobile version.
link to codepen in case: https://codepen.io/RakuRak/pen/oEGaBw
#map {
width: 100%;
z-index: 0;
position: absolute;
height: 100%;
top: 0;
}
.contact {
z-index: 1;
position: relative;
height: 600px;
border-top: 3px solid #3EAC37;
}
.contact__bottomBar {
position: absolute;
left: 10px;
bottom: 10px;
height: 50px;
background: rgba(255,255,255,0.85);
width: calc((100% / 3) * 2 - 30px);
text-align: center;
line-height: 50px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.contact__form {
background: rgba(255,255,255,0.85);
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
width: calc(100% / 3);
float: right;
height: calc(100% - 20px);
position: relative;
z-index: 1;
padding: 20px;
margin-right: 10px;
margin-top: 10px;
.button {
display: block;
background: #fff;
text-transform: uppercase;
font-size: 20px;
color: #3EAC37;
i {
color: rgba(0,0,0,0.7);
padding-top: 5px;
padding-right: 6px;
}
&:last-of-type {
margin: 0;
}
}
label {
text-align: left;
display: block;
margin-bottom: 4px;
}
.form-horizontal {
background: #f5f5f5;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
padding: 10px;
.form-group {
margin-bottom: 20px;
&:last-of-type {
margin-bottom: 10px;
}
}
h4 {
margin-bottom: 20px;
}
input, textarea {
border: 1px solid #bbb;
&:active, &:focus {
border-color: #3EAC37;
box-shadow: 0 0 0 0.2rem rgba(62, 172, 55,.25)
}
}
.btn {
display: block;
width: 200px;
margin: 0 auto;
}
}
textarea {
min-height: 62px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact" class="contact">
<div id="map"></div>
<div class="contact__bottomBar">
<i class="fas fa-map-marker-alt fa-md"></i> Lorem ipsum
</div>
<div class="contact__form">
<div class="button">
<i class="fas fa-phone-square fa-lg"></i><a class="link" href="tel:[phone]">00 00 00 00</a>
</div>
<div class="contact__separator"></div>
<div class="button">
<i class="fas fa-envelope-square fa-lg"></i><a class="link" href="mailto:lorem#ipsum.net.com" target="_top">lorem#ipsum.net.com</a>
</div>
<div class="contact__separator"></div>
<form action="https://formspree.io/lorem#gmail.com" method="post" class="form-horizontal">
<h4>Napisz do nas</h4>
<div class="form-group">
<label for="user-name" class="control-label">Imię</label>
<input name="name" type="text" class="form-control" id="user-name" placeholder="Wpisz swoje imię/nazwę firmy">
</div>
<div class="form-group">
<label for="user-email" class="control-label">Email</label>
<input name="email" type="email" class="form-control" id="user-email" placeholder="Wpisz swój Email">
</div>
<div class="form-group">
<label for="user-message" class="control-label">Wiadomość</label>
<textarea name="user-message" id="user-message" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Wyślij</button>
</div>
</form>
</div>
</section>

Answer 1

You need to use media queries.
#media screen and (max-width: 767px) {
.contact__form {
width: 100%; // Whatever you want
}
}

Answer 2

I changed the postition as I wanted in first place, below CSS for mobile version:
#map {
// width: 100%;
// z-index: 0;
position: relative; //absolute//
height: 100%;
top: 0;
}
.contact__bottomBar {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
height: 50px;
background: rgba(255, 255, 255, 0.85);
width: auto;
text-align: center;
line-height: 50px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.contact {
// z-index: 1;
// position: relative;
height: 600px;
border-top: 3px solid #3EAC37;
}
.contact__form {
background: rgba(255,255,255,0.85);
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
width: 100%;
// float: right;
// height: calc(100% - 20px);
// position: relative;
// z-index: 1;
padding: 20px;
margin-right: 10px;
margin-top: 10px;
}
footer {
background: rgba(0, 0, 0, 0.7);
text-align: center;
height: 40px;
line-height: 40px;
/* bottom: 0px; */
/* margin-bottom: -13px; */
margin-top: 600px;
color: #fff;
position: relative;
}