How to move div element using css? - html

Question

I am in the middle of assignment. I am trying to make https://joseff-regmi.github.io/Tutangle/ responsive, I am having trouble with the body part
and most of the css3 features (flex..) are not allowed. how can I stack middle box on the top and followed by left and right on mobile version
[![enter image description here][2]][2]
on mobile:
[2]: https://i.stack.imgur.com/M80Co.png

Answer 1

You can use flexbox and its order property :
.parent {
background-color: blue;
height: 400px;
width: 400px;
display: flex;
flex-direction: column;
}
#child1 {
background-color: grey;
height: 100px;
margin: 20px;
order: 2;
}
#child2 {
background-color: green;
height: 100px;
margin: 20px;
order: 1;
}
#child3 {
background-color: aqua;
height: 100px;
margin: 20px;
order: 3;
}
<div class="parent">
<label for="">This is parent</label>
<div class="child" id="child1">This is child1</div>
<div class="child" id="child2">This is child2</div>
<div class="child" id="child3">This is child3</div>
</div>

Answer 2

if you do not want to use flexbox, then this is a way to get your work done
show/hide desktop and mobile div based on needs using media query,
for example: display:block; for class desktop,
and display:none; for class mobile and vice-versa
<div class="parent desktop">
<label for="">This is parent</label>
<div class="child" id="child1">This is child1</div>
<div class="child" id="child2">This is child2</div>
<div class="child" id="child3">This is child3</div>
</div>
<div class="parent mobile">
<label for="">This is parent</label>
<div class="child" id="child2">This is child2</div>
<div class="child" id="child1">This is child1</div>
<div class="child" id="child3">This is child3</div>
</div>