Swap div position with media query

Question

When browser width becomes under 600px, I'd like such a position change, thanks to a media query :

It seems that this would need to swap div position. Is this possible with CSS?

* { padding: 0; margin: 0; }
#a { float: left; background-color: red; width: 150px; }
#b { background-color: blue; }
#c { float: right; width: 40%; background-color: yellow; }
@media (max-width: 600px) { 
        /* ... */
}

<div>
   <div id="a">a</div>
   <div id="c">c</div>
   <div id="b">b</div>
</div>

G-Cyrillus · Accepted Answer · 2016-05-14T15:19:27.747

2

You only need to reset the float or width properties.

Do mind the BFC block formating context when you deal with floating and non floatting elements.

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

* {
  padding: 0;
  margin: 0;
}
#a {
  float: left;
  background-color: red;
  width: 150px;
}
#b {
  background-color: blue;
}
#c {
  float: right;
  width: 40%;
  background-color: yellow;
}
@media (max-width: 600px) {
  #c {    
    width: 100%;
  }
}

<div>
  <div id="a">a float</div>
  <div id="c">c float or not</div>
  <div id="b">b</div>
</div>

edited May 14 '16 at 15:19

answered May 14 '16 at 15:14

G-Cyrillus

101,410
14
105
129

Here is my last problem @GCyrillyus : http://stackoverflow.com/questions/37239774/full-width-input-in-a-div ... Maybe you'll have an idea :) – Basj May 15 '16 at 14:56
@Basj see dippas answer updated from http://codepen.io/gcyrillus/pen/WwWPwP/ should do what you finally look for – G-Cyrillus May 15 '16 at 15:51

score 2 · Answer 2 · edited May 23 '17 at 10:28

Yes, it's possible with CSS. In fact, it's quite easy with flexbox, which is designed for such a task.

* {
  padding: 0;
  margin: 0;
}

#container {
  display: flex;                    /* establish flex container */
}

#a {
  flex: 0 0 150px;                  /* don't grow, don't shrink, fixed at 150px width */
  background-color: red;
}
#b {
  flex: 1;                          /* consume all available free space in the row */
  background-color: aqua;
}
#c {
  flex: 0 0 40%;                    /* don't grow, don't shrink, fixed at 40% width */
  background-color: yellow;
}
@media (max-width: 600px) {
  #container { flex-wrap: wrap; }        /* allow flex items to wrap */
  #b { flex-basis: calc(100% - 150px); } /* take full width less width of #a */
  #c { flex-grow: 1; }                   /* consumer all available free space in the row */
}

<div id="container"><!-- children ordered chronologically; no need to reverse order -->
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

To learn more about flexbox visit:

Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial

Benefits of flexbox:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

Swap div position with media query

2 Answers2

Linked