CODEWITHSUNDEEP
htmlcss
Lost305
Lost305

Reputation: 175

Display First DIV beneath Second DIV

say I have...

<div id="A"></div>
<div id="B"></div>

How can the end-user view div B on top of div A on their browser?

I'm trying to do this with CSS without editing the html.

Upvotes: 3

Views: 2906

Answers (5)

Richard Foucaud
Richard Foucaud

Reputation: 310

You need to add display:flex; and flex-direction:column-reverse; to the parent of your two divs.

body{
    display:flex;
    flex-direction:column-reverse;
}

Or you can choose div's order manually with order property:

body {
  display: flex;
}

#A {
  order: 2;
}

#B {
  order: 1;
}

Upvotes: 2

Chiller
Chiller

Reputation: 9738

You can use flex-box and order to acheive what you want

body {
  display: flex;
  flex-wrap:wrap;
}

#A {
  width: 100%;
  height:50px;
  background: red;
  color:white;
  order: 2;
}

#B {
  width: 100%;
  height:50px;
  background: black;
  color:white;
  order: 1;
}
<div id="A">A</div>
<div id="B">B</div>

Upvotes: 4

frnt
frnt

Reputation: 8795

Use CSS3 flex to change the positioning of flex elements and this can be done using order property,

The CSS order property specifies the order used to lay out flex items in their flex container.

#box{
	display:flex;
	width:100%;
	flex-direction:column;
}
.A{
	order:2;
  background:#111;
  color:#fff;
}
.B{
	order:1;
  background:#111;
  color:#fff;
}
<div id="box">
<div class="A">A</div>
<div class="B">B</div>
</div>

Upvotes: 0

j08691
j08691

Reputation: 207861

It feels unclean to do it this way but here you go (no container element needed)

#A {
  display: table-footer-group;
}

#B {
  display: table-header-group;
}
<div id="A">A</div>
<div id="B">B</div>

Upvotes: -1

Baptiste Arnaud
Baptiste Arnaud

Reputation: 2750

A way to do this in CSS:

The container must have display:flex attribute

Then :

#A{
   order:2;
}

#B{
   order:1;
}

You can also achieve this with jQuery

$('#B:parent').each(function () {
    $(this).insertBefore($(this).prev('#A'));
});

Upvotes: -1

Related Questions