CSS Flexbox Order

Question

I'm using Flexboxes for responsive webdesign and am changing the order of my div boxes according to the display size.

For the PC-View I use two types of designs: Picture on the left side (float left; clear left) oder picture on the right side (float right; clear right) floatet by text.

For the Mobile-View I change it to a column flexbox design (Title on Top followed by the picture and then the text) using "order". This works for the right side picture without any problems. Using the same code for left side pictures puts me the picture on the bottom without any chance to change it.

Does anyone has an idea why?

@media only screen and (max-width: 900px) {
div.wrap_content_pic_left, div.wrap_content_pic_right {
      width: 97%;
    
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center
    
 }   

 div.wrap_content_pic_right h1, wrap_content_pic_left h1, {
  -webkit-order: 1;
  order: 1;
 }

 div.wrap_content_pic_right h3, wrap_content_pic_left  h3, {
  -webkit-order: 3;
  order: 3;
 }

 div.wrap_content_pic_left div#pic, div.wrap_content_pic_right div#pic {
  float: none;
   
  -webkit-order: 2;
  order: 2;
 
  width: auto;
  text-align:  center;
   
 }
}


   div.wrap_content_pic_right, div.wrap_content_pic_left {
  /*Position*/
  position: relative;
  padding: 1%;
  margin-bottom: 1%;
  clear: both;
 }

 div.wrap_content_pic_right div#pic {
  /*Size*/
  width: 30%;
      
  /*Position*/
  float: right;
  clear: right;
      
 }
  
  
 div.wrap_content_pic_left div#pic {
  /*Size*/
  width: 30%;

  /*Position*/
  float: left;
  clear: left;
 }

<div class = "wrap_content_pic_left">
    <div id="pic">
       <a href = "URL"><img src="PIC"/></a>
       <h3><a href = "URL">Text</a></h3>
    </div>
   <h1>Title</h1>
   <h3>Text</h3>
   <div id="mobile" ><h3><a href = "URL">Text</a></h3></div>
   <div style="clear: both"></div> 
</div>

Be aware that floats are ignored in a flex container. http://stackoverflow.com/q/39194630/3597276 — Michael Benjamin, Nov 11 '16 at 19:45

score 1 · Answer 1 · answered Nov 11 '16 at 21:16

Floats are ignored when using display: flex;. Instead you should look at how flex should be used. Here is a good link on How to understand Flexbox. I have myself reverted back to this time and time again without fail, it is very short and concise, and will leave you understanding Flex better.

There are issues when using flex, especially when using percentages to determine the overall width. However there are some great work arounds that you can find right here on SO

CSS Flexbox Order

1 Answers1