I am unsure of your requirements. If I understand correctly, you can achieve what you want using the data-* attributes such as data-title, data-description, and data-label.
It appears that your content is dynamic and your HTML structure should look something like this:
<div id='area1'>
<div id='myElement'> My element </div>
</div>
<div data-area1element="My element" id='area2'>
</div>
The above HTML will function without any CSS for desktop and mobile view. You can display the content of id="myElement" in id="area2" when the browser window is less than or equal to 767px. The content of id="myElement" should be included in the data-area1element="" attribute.
Below is the CSS styling:
#myElement{
color: green;
}
@media (max-width: 767px){
#myElement{
display: none;
}
#area2{
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid red;
}
#area2:before{
content: attr(data-area1element);
font-size: 15px;
font-weight: 700;
}
}
A code snippet is also provided below for reference:
#myElement{
color: green;
}
@media (max-width: 767px){
#myElement{
display: none;
}
#area2{
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid red;
}
#area2:before{
color: blue;
content: attr(data-area1element);
font-size: 15px;
font-weight: 700;
}
}
<div id='area1'>
<div id='myElement'> My element </div>
</div>
<div data-area1element="My element" id='area2'>
</div>
I believe this CSS solution will address your needs.
Upon further consideration:
If you wish to handle this dynamically, a jQuery solution may be necessary as pure CSS won't suffice. Here's an example where a duplicate element is created for smaller screen sizes:
<div class="container py-4">
<div class="card p-3 mb-3">
<h1 class="text-center my-4">Desktop Form</h1>
<div id="desktopFrom" class="d-none d-lg-block">
<form action="" method="POST">
<div class="form-group">
<label>Your Name</label>
<input placeholder="Your Name" type="text" name="text" class="form-control" />
</div>
<div class="form-group">
<buton type="submit" role="button" class="btn btn-primary">Send Form</button>
</div>
</form>
</div>
</div>
<!-- Desktop Card -->
<!-- Mobile Card -->
<div class="card p-3 mb-3">
<h1 class="text-center my-4">Mobile Form</h1>
<div id="mobileFrom"></div>
</div>
</div>
The Bootstrap@4 framework is utilized in the above HTML code.
$(function(){
var desktopForm = $('#desktopFrom').html();
$(window).on('load resize', function(){
if ($(window).width() <= 991) {
$("#mobileFrom").html(desktopForm);
} else {
$("#mobileFrom").empty();
}
});
});
This jQuery script provides a custom solution.
You can test out the functionality on this CodePen link. Give it a try!