What is the best way to move an element that’s on the top to the bottom in Responsive design

by

Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn’t great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers do support it.

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

http://caniuse.com/#feat=flexbox

Be aware that Flexbox can clash with other layout methods, such as the typical grid techniques. Flex items that are set to float can cause unexpected results in Webkit browsers using the 2009 specification (display: -webkit-box).

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. What are the steps to make a HTML design responsive? [closed]
  3. Bootstrap row with columns of different height
  4. Vertically align an image inside a div with responsive height
  5. Grid of responsive squares
  6. Responsive grid of hexagons
  7. Responsively change div size keeping aspect ratio [duplicate]
  8. IE8 support for CSS Media Query
  9. Maintain aspect ratio of div but fill screen width and height in CSS?
  10. Maintain the aspect ratio of a div with CSS
  11. Shape with a slanted side (responsive)
  12. Responsive Separator for Horizontal List
  13. Media Queries for Different zoom Levels of Browser
  14. Background image not showing in Safari
  15. Hiding elements in responsive layout?
  16. Mosaic of images HTML/CSS
  17. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  18. Responsive tables, the smart way
  19. Auto height on parent container with Absolute/Fixed Children
  20. how to make responsive website for all devices [closed]
  21. Responsive CSS Circles
  22. Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques [closed]
  23. Load a low-res background image first, then a high-res one
  24. How to modify the fill color of an SVG image when being served as background image?
  25. How to create a curved speech bubble?
  26. HTML Div border not showing
  27. How do I assign multiple classes to one HTML element? [closed]
  28. Make A List Item Clickable (HTML/CSS)
  29. How do I make a text input non-editable?
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment