Switching the order of block elements with CSS [duplicate]

by

Here is a “simple as possible” example, for changing the order of div-elements (when resizing the browser window):

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

Example:
http://jsfiddle.net/devnull/qyroxexv/
(change window-width to see the effect of changing the order of the divs)

More Related Contents:

  1. CSS Not Being Responsive
  2. Change select box option background color
  3. Li item on two lines. Second line has no margin
  4. When to use the !important property in CSS [duplicate]
  5. Add a background image (.png) to a SVG circle shape
  6. Make an image responsive – the simplest way [duplicate]
  7. How do I set a background-color for the width of text, not the width of the entire element, using CSS?
  8. Position absolute and overflow hidden
  9. Use CSS to remove the space between images [duplicate]
  10. Borders disappear in Chrome when I zoom in
  11. CSS ONLY Animate Draw Circle with border-radius and transparent background
  12. Bootstrap 4 – Sticky footer – Dynamic footer height
  13. Center HTML Input Text Field Placeholder
  14. CSS – relative positioned parent div not stretching to absolute child div height
  15. How does the z-index property really work?
  16. Linking to CSS in an SVG embedded by an IMG tag
  17. How to rotate a 90 degrees?
  18. How do I make an input element occupy all remaining horizontal space?
  19. Understanding grid negative values
  20. Remove ‘:hover’ CSS behavior from element
  21. HTML + CSS: Numbered list with numbers inside of circles
  22. How to move placeholder to top on focus AND while typing?
  23. HTML/CSS set div to height of sibling
  24. Should Tables be avoided in HTML at any cost?
  25. Border around specific rows in a table?
  26. Making a div that covers the entire page
  27. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  28. How to calc() the number of rows in a grid template?
  29. Is it possible to set a src attribute of an img tag in CSS?
  30. How to fill 100% of remaining height?

Leave a Comment