Product Item: Responsive Layout - html

Question

I've trouble finding a good solution fo a relativly simple responsive layout problem.
It's a product item component which should look like in this example.
It brings some sort of equal-height-requirement with it (on desktop img to other content and on mobile img to product-info).
As stand alone it woudnt be a problem but i struggle with finding a good practice for two different viewports without duplicate content/markup.
Main Problem is the wrapping/flow-behaviour. Usually i would place a wrapper arround info and detail, but because of the mobile version this isn't possible.
Can maybe give me someone a good hint how to solve my problem?
Would be much appreciated
Thx and greetings, eldaDev
.product-item {
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
}
.product-item__image {
width: 25%;
background-color: #ccc;
}
.product-item__info {
width: 75%;
background-color: green;
}
.product-item__detail {
width: 100%;
background-color: blue;
}
<!-- Markup example mobile version alike -->
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>

Answer 1

.product-item {
}
.product-item__image img{width:100%}
.product-item__image {
float: left;
width: 20%;
height: 400px;
background: #ffd9d9;
}
.product-item__info {
float: left;
width: 80%;
background: #f1f1f1;
text-align: center;
padding: 80px 0;
}
.product-item__detail {
float: left;
width: 80%;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
}
#media (max-width: 767px) {
.product-item__image {
float: left;
width:20%;
}
.product-item__info {
float: right;
width: 70%;
background: #f1f1f1;
text-align: center;
padding: 120px 0;
}
.product-item__detail {
float: none;
width: 100% !important;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
clear: both;
}
}
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>

Answer 2

Try this: It is working for me. float and #media() used to make it responsive. If not work, then let me know. Its my pleasure to help others :)
*{
font-family: arial;
color: #aaa;
font-weight: normal;
}
.wrapper{
border: solid 1px #363636;
width: 500px;
height: 200px;
padding: 10px;
}
.image{
float: left;
height: 100px;
width: 20%;
border: solid 1px #363636;
}
.images > img{
height: 90%;
}
.product_info{
float: left;
margin-left: 2%;
border: solid 1px #363636;
width: 77%;
height: 100px;
text-align: center;
}
.product_detail{
float: left;
margin-top: 2%;
border: solid 1px #363636;
width: 99%;
text-align: center;
height: 85px;
}
#media(max-width: 767px;){
.image{
float: left;
height: 200px;
width: 20%;
border: solid 1px #363636;
}
.product_detail{
float: right;
margin-top: 2%;
margin-left: 22%;
border: solid 1px #363636;
width: 77%;
text-align: center;
height: 85px;
}
}
<center>Desktop</center>
<div class="wrapper">
<div class="image">
<img src="https://i.stack.imgur.com/D8dBds.png" alt="IMG">
</div>
<div class="product_info">
<h1>Product Info</h1>
</div>
<div class="product_detail">
<h1>Product Detail</h1>
</div>
</div>