I have two div tags in a row inside a div (one on the left and one on the right). The left div tag has texts and the right div has an image. How do I make the right div with the image in it appear on the background of the left div tag with texts, and be a bit opaque, when in mobile view. It seems that in asp.net designs, if you have two div tags I a row, the right div moves below the left div whenever you switch to mobile view.
What I mean is, currently the two div tags appear to be in the left and right positions when the page section is desktop/laptop view. Then when I switch to mobile view by minimizing the browser, the right div tag moves below the left div tag. But I want the right div tag with its image to be behind the left div tag (which has texts), when I switch to mobile view.
How can I do that please?
Here is my HTML for that page section
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<title></title>
<style>
.wrap {
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrap">
<div class="subbottom" style="width: 100%; margin: 0 auto; margin-bottom: 80px;">
<br />
<div class="row col-sm-11" style="width: 100%; margin: 0 auto; padding: 6px;">
<div class="col-sm-7" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 6%; margin-top: 6%;">
<div style="font-weight: 800; margin-top: 5%; font-size: 11.2vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 1px; text-align: start;">
<span style="color: #145c7c; font-family: 'NT Wagner', sans-serif;">A good way</span>
<span style="color: #000000; font-family: 'NT Wagner', sans-serif;">to start learning</span>
</div>
<br />
</div>
<div class="col-sm-5" style="position: relative; background-image: url('/images/head3.png'); background-size: cover; background-repeat: no-repeat; margin: 0 auto; padding: 6px; margin-top: 6%; margin-bottom: 7%;"></div>
</div>
</div>
</div>
</form>
</body>
</html>
