Looking to achieve a specific layout with only two resolutions in mind (767px minimum and maximum).
- For screens larger than 767px, display two divs side by side: one with text on the left and the other with an image on the right.
- The text remains in a fixed position (font changes on resize), while the image moves accordingly.
- The image may go behind the text, hence on a lower z-index.
- For screens smaller or equal to 767px, utilize bootstrap's default functionality to stack the divs on top of each other.
- However, invert the order (image first row, text second row) without overlapping. https://i.sstatic.net/U1v6J.png
I'm struggling to achieve both layouts with the text div having absolute position and the image as flex with transform: translateX(50%). Need to simplify the code for better readability.
@media (max-width: 767px) {
.flex-md-row-reverse {
flex-direction: column-reverse !important;
}
.order-md-1 {
order: 2;
}
.order-md-2 {
order: 1;
}
}<html>
<head>
<!--Load bootstrap before custom css-->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf7eaf7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- hero -->
<div class="container">
<div class="row hero flex-md-row-reverse">
<div class="hero-text col-md-6 order-md-1" >
MY TEXT
</div>
<div class="hero-img col-md-6 order-md-2">
<img src="https://placehold.co/200x200">
</div>
</div>
</div>
</body>
</html>