How to stack Second Div on First in Responsive (CSS)?

Question

I am trying to stack Div 1 & Div 2 (which are side by side in desktop mode), to stack Div 2 follwed by Div 1 below. I used floats but cannot make it work. Please find the attach image for short description.

Desktop View

DIV 1(Img) & DIV 2(Txt)

Tablet view 740px (Stack Div2 First & Div 1)

DIV 2(Txt)

DIV 1(Img)

Look into the flexbox `order` property, or have 2 before 1 in the source code and float 2 to the right and 1 to the left. — CBroe, Jul 11 '15 at 04:44
Try the first solution here: http://stackoverflow.com/questions/27373685/make-second-div-appear-above-first-without-absolute-position-or-changing-html/27374063#27374063 — Freelancer Mahmud, Mar 12 '17 at 03:30

score 0 · Answer 1 · answered Jul 11 '15 at 11:24

If I understand the question you're asking, you want to have two divs, div1, and div2, next to each other on desktop, but on mobile have div2 stack on top of div1.

To do this. you'll want to have the HTML code for div2 first in you index.html file followed by div1. Then specify float:right on desktop.

I've attached a fiddle below for a better understanding. http://jsfiddle.net/d2o7zn1v/

In this fiddle, div2 will remain to the right of div1 on desktop but stack on top of div1 on a screen size below 600px.

I hope this helps!

How to stack Second Div on First in Responsive (CSS)?

Desktop View

Tablet view 740px (Stack Div2 First & Div 1)

1 Answers1