For my website I want to make a responsive design for stacking elements under each other. I made this work for the first section (class named withwithout1), but I can't make it work for the class named withwithout2. Keep in mind I want to keep the elements the same way I made them for the larger screen size option.
In short: How can I manage to place the elements under each other in the order I want them to (So text first than the image).
/* Withwithout styling */
.withwithout {
height:58rem;
position: relative;
}
.withwithout1 {
display: grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.withwithout1left {
text-align: center;
margin-top: 8rem;
}
.withwithout1left h4 {
color: var(--color-withwithout);
}
.withwithout1left h2 {
margin: 0.2rem 0rem 1rem;
}
.withwithout1right {
text-align: center;
}
.withwithout1right img {
max-width: 65%;
}
.withwithout2 {
display: grid;
margin-top: 2rem;
position: relative;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.withwithout2left {
text-align: center;
}
.withwithout2left img {
max-width: 60%;
}
.withwithout2right {
text-align: center;
margin-top: 2rem;
}
.withwithout2right h4 {
color: var(--color-withwithout);
}
.withwithout2right h2 {
margin: 0.2rem 0rem 1rem;
}
@media screen and (max-width: 1070px) {
.startingbackground_div p {
font-size: 0.93rem;
}
.startingbackground_div h1 {
font-size: 2rem;
}
.startingbackground2_left h2 {
font-size:1.59rem;
}
.startingbackground2_left p {
font-size:0.93rem;
width:100%;
margin-left:3rem;
}
.withwithout1left h2{
font-size: 1.75rem;
}
}
@media screen and (max-width: 890px) {
.nav_menu {
display:none;
}
.login_nav {
display:none;
}
.hamburger {
display:flex;
}
.nav_container {
padding-left: 0.3rem;
margin-left: auto;
}
.startingbackground_container {
display:block;
margin-top: 9rem;
}
.startingbackground_div p {
font-size: 1.1rem;
}
.startingbackground_div h1 {
font-size: 2.8rem;
}
.startingbackground {
height: 90vh;
}
.solutions {
margin-top: 2rem;
overflow:hidden;
}
.solutions_right img {
display:flex;
margin:auto;
margin-top:5rem;
width:77%;
height:auto;
}
.startingbackground2 {
height:18rem;
}
.startingbackground2 h2 {
margin-top: 4rem;
font-size:1.04rem;
}
.startingbackground2 p {
font-size:0.79rem;
}
.startingbackground2_right {
margin-top:4.5rem;
max-width: 70%;
}
.withwithout {
height:100rem;
}
.withwithout1 {
position: relative;
display: inline-block;
text-align: center;
}
.withwithout1left h2 {
font-size:1.4rem;
}
.withwithout1right {
max-width: 60%;
margin-top: 3rem;
margin-left: 7rem;
}
.withwithout2 {
position: relative;
display: inline-block;
text-align: center;
}
.withwithout2right {
margin-top:-35rem;
}
.withwithout2left {
margin-top:16rem;
} <!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Animations -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<section class="withwithout">
<div class="container withwithout_container">
<div class="withwithout1">
<div class="withwithout1left">
<h4>Without Draftflex</h4>
<h2>Many tools can be required for the <br> draft-to-deal proces</h2>
<p>In many projects, all kinds of tools can be helpful. <br> However, the combination of these application is what <br> is desired. Using many different tools can interfere <br> with an easy workflow and may decrease efficiency <br> and productivity.</p>
</div>
<div class="withwithout1right">
<img src="/Icons/replaces.png" alt="replaces">
</div>
</div>
<div class="withwithout2">
<div class="withwithout2left">
<img src="/Icons/replaces2.png" alt="replaces2">
</div>
<div class="withwithout2right">
<h4>Without Draftflex</h4>
<h2>An integration of these tools is <br> what improves the workflow</h2>
<p>By the use of DraftFlex, the combined <br> process of all these applications is used. <br> This helps boost the performance <br> and competence. An easy workflow is key <br> in every business, and this is what DraftFlex <br> stimulates. </p>
</div>
</div>
</div>
</section>