How can i make div 1 appear below in div 2 using css

Question

<div class="1">
<p> THIS IS DIV 1> </p>
<div class="2">
<p> THIS IS DIV 2> </p>

I am using some shortcode but the problem is it will appear always on the top of all elements.

Thanks in advance..

Answer 1

First of all your elements does not get closed properly. So assuming you fix it with this code:

<div class="class1">
    <p> THIS IS DIV 1> </p>
</div>
<div class="class2">
    <p> THIS IS DIV 2> </p>
</div>

Use float: right; and they will switch places. Or use flex display.

.float {
  border: 1px solid green;
}

.float .class {
  float: right;
  width: 100%;
}

.float:after {
  content: '';
  clear: both;
  display: block;
}

.flex {
  display: flex;
  flex-direction: column-reverse;
  border: 1px solid blue;
}

<div class="float">
    <div class="class class1">
        <p> THIS IS DIV 1> </p>
    </div>
    <div class="class class2">
        <p> THIS IS DIV 2> </p>
    </div>
</div>

<div class="flex">
    <div class="class class1">
        <p> THIS IS DIV 1> </p>
    </div>
    <div class="class class2">
        <p> THIS IS DIV 2> </p>
    </div>
</div>

Answer 2

You can use flex order. You'll have to add a container or use the current containing element and give it a display: flex property.

.cont{
  display: flex;
  flex-direction: column;
}

.c1{
  order: 2;
}

.c2{
  order: 1;
}

<div class="cont">
  <div class="c1">
    <p> THIS IS DIV 1> </p>
  </div>
  <div class="c2">
    <p> THIS IS DIV 2> </p>
  </div>
</div>

Answer 3

Try this solution

The HTML:

<div class="one">
   <p></p>
</div>
<div class= "two">
   <p></p>
</div>

And the CSS:

div {
  width: 200px;
  padding: 100px;
}

div.one {
  background: green;
}

div.two {
  background: red;
}

Please note that I changed the class name because CSS identifiers may not start with numbers. In CSS, class names used in selectors are considered "CSS identifiers". Therefore, the leading number must be escaped. If you really need to use numbers, then please refer to CSS escaping rules

Answer 4

Well first you would need to close the div with class 1 and the second one also.

<div class="1">
  <p></p>
</div>
<div class= "2">
  <p></p>
</div>

try this and tell me what you get :)

YOu can also add css like this :

div {
  display: inline-block;
}

Another and maybe the best way would be to make the second div float right .. like his :

.2 {
  float: right;
}