How to move div element using css?-CodePudding

I am in the middle of assignment. I am trying to make

[![enter image description here][2]][2]

on mobile: [2]: https://i.stack.imgur.com/M80Co.png

CodePudding user response：

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 >
    <label for="">This is parent</label>
    <div  id="child1">This is child1</div>
    <div  id="child2">This is child2</div>
    <div  id="child3">This is child3</div>
  </div>

CodePudding user response：

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 >
  <label for="">This is parent</label>
  <div  id="child1">This is child1</div>
  <div  id="child2">This is child2</div>
  <div  id="child3">This is child3</div>
</div>
<div >
  <label for="">This is parent</label>
  <div  id="child2">This is child2</div>
  <div  id="child1">This is child1</div>
  <div  id="child3">This is child3</div>
</div>