newcoder1010 Posted October 4, 2016 Share Posted October 4, 2016 Hi, I have this html: <section id = "block-webform-client-block-132"> <div class = "aa"> ....... </div> <div class = "bb"> ....... </div> </section> I simply like to keep bb class same place. I only like to bring the aa class down. So it means, it will show bb first and then aa below bb. I used this css: This bring both down. Can you please help? .aa {margin-top:20px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted October 4, 2016 Share Posted October 4, 2016 Its possible with display: flex; and flex-direction: column-reverse; might be support issues, OR you could just swap them or content round. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 4, 2016 Author Share Posted October 4, 2016 Are you saying this? { display: flex; margin-top: 100px; flex-direction: column-reverse;} it took both classes down... Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2016 Share Posted October 4, 2016 Why can't you reorder the HTML? Link to comment Share on other sites More sharing options...
davej Posted October 4, 2016 Share Posted October 4, 2016 You could duplicate one of the divs and then hide it. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2016 Share Posted October 5, 2016 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> #block-webform-client-block-132 { clear: both; display: flex; flex-flow: column-reverse wrap; } </style> </head> <body> <section id="block-webform-client-block-132"> <div class = "aa">AAAAAA ....... </div> <div class = "bb"> BBBBBB....... </div> </section> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now