Change order of elements in mobile view using css - css

Question

I need to change the order of elements using css in mobile view. Please refer to the code below.
<div class="container">
<aside>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span>This line should come after heading.</span>
</div>
I want to move the span right after the heading in mobile view.
This is how I want in mobile devices:
.container {
display: inline-block;
width: 100%;
}
aside {
width: 50%;
display: inline-block;
}
span {
width: 50%;
float: right;
margin-top: 30px;
}
<div class="container">
<aside>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span>This line should come after heading.</span>
</div>

Answer 1

Try this by switching classes using media queries
#media screen and (max-width: 600px) {
.show-mob {
display: block;
}
.show {
display: none;
}
}
<div class="container">
<aside>
<h2>Heading</h2>
<span class="show-mob">This line should come after heading.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span class="show">This line should come after heading.</span>
</div>

Answer 2

You can do like this.
<div class="container">
<aside>
<h2>Heading</h2>
<span id="spn1" style="display:none">This line should come after heading.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar
sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac
im</p>
Link
</aside>
<span id="spn2">This line should come after heading.</span>
</div>
For mobile view use media query
#media screen and (max-width: 600px) {
#spn1{
display:block;
}
#spn2{
display:none;
}
}

Answer 3

Its not possible to change it only with CSS
If you can use jquery you can try to use the .append() function and something like that
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
});
if you dont have the chance to use jQuery you need to restructure your HTML

Answer 4

You can do this:
<div class="container">
<aside>
<h2>Heading</h2>
<span class="show-on-mobile">This line should come after heading.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span class="hide-on-mobile">This line should come after heading.</span>
</div>
and for CSS:
.container {
display: inline-block;
width: 100%;
}
aside {
width: 50%;
display: inline-block;
}
span {
width: 50%;
float: right;
margin-top: 30px;
}
.show-on-mobile {
display:none;
}
#media (max-width: 575px) {
.hide-on-mobile {
display:none;
}
.show-on-mobile {
display:block;
float:none;
width:100%;
margin-bottomn:30px
}
}
EXAMPLE

Answer 5

#media only screen and (max-width: 768px) {
.container {
display: inline-block;
width: 100%;
}
aside {
width: 100%;
display: inline-block;
}
.container h2{position:relative; margin-bottom:20px;}
.container p{padding-top:30px;}
span {
width: 100%;
position:absolute;
left:0;
top:60px;
padding:10px;
}
}
<div class="container">
<aside>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span>This line should come after heading.</span>
</div>
Please try like this